CSS architecture: How To Write Clean & Scalable Code
-
Upload
netguru -
Category
Technology
-
view
425 -
download
1
Transcript of CSS architecture: How To Write Clean & Scalable Code
HOW TO WRITE CLEAN & SCALABLE CODECSS ARCHITECTURE
[email protected] /czajkovsky
Mateusz Czajka - senior dev @ netguru.co
DEFINE A STYLE GUIDESCSSLINT
.pill-box { &__icon{ display: block; border: 1px solid $primary-color; }}
.pill-box { &__icon{ display: block; border: 1px solid $primary-color; }}
2 of 5 errors: SpaceBeforeBrace: Opening curly ̀{̀ should bepreceded by one space, Line 38, Column 8
DETERMINE BROWSERSAUTOPREFIXER
// in codea { display: flex;}
// outputa { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex}
USE VARIABLESBASICS
// colors$primary-color: #4391d7;
// font-sizes$fs-1: 12px;$fs-2: 14px;
// font-families$ff-open-sans: $ff-open-sans: 'Open Sans', sans-serif;
// font-weights$fw-bold: 700;
USE VARIABLESZINDEXES
// view/component.settings-modal { // ... z-index: $z-index-settings-modal;}
.avatar-popover { // ... z-index: $z-index-avatar-popover;}
USE VARIABLESZINDEXES
// _z-index-variables.scss$z-index-1: 1000;$z-index-2: 2000;// ...$z-index-9: 9000;
// ...$z-index-settings-modal: $z-index-settings-modal: $z-index-5;$z-index-avatar-popover: $z-index-6;
USE MIXINS & EXTENDSMIXINS// Sass.box { @include absolute(top 5px left 10px); @include sizing(100% 50px);}
// CSS.box.box { position: absolute; top: 5px; left: 10px; width: 100%; height: 50px;}
USE MIXINS & EXTENDSEXTENDS// Sass%error { background: $error-color;}
.error { @extend %error; border-width: 1px; &--important { @extend %error; border-width: 3px; }}
// CSS.error,.error--important { background: #f00;}
.error { border-width: 1px;} .error--important { border-width: 3px;}
USE A FRAMEWORKSTRUCTURE
framework├── _components.scss├── _overrides.scss├── _variables.scss└── overrides └── _framework-overrides-go-here.scss
USE A FRAMEWORKCOMPONENTS
// framework/_components.scss// Core CSS@import "bootstrap/scaffolding";@import "bootstrap/type";// @import "bootstrap/code";@import "bootstrap/grid";// @import "bootstrap/tables";// @import "bootstrap/tables";@import "bootstrap/forms";// @import "bootstrap/buttons";// ...
USE FRAMEWORKVARIABLES
// variables from package/GEM$gray-base: #eee !default;$gray-darker: darken($gray-base, 10%) !default;// etc...
// framework/_variables.scss (overrides)// $gray-base: #eee !default;$gray-darker:$gray-darker: darken($gray-base, 20%);// etc...
USE A FRAMEWORKOVERRIDES
// framework/_overrides.scss// Core CSS// @import "overrides/scaffolding";// @import "overrides/type";// @import "overrides/code";@import "overrides/grid";// @import "overrides/tables";// @import "overrides/tables";@import "overrides/forms";// @import "overrides/buttons";// ...
THE RESULTSTRUCTURE├── application.scss├── components│ └── _your-custom-components-go-here.scss├── views│ └── _your-view-based-styles-go-here.scss├── framework│ ├── │ ├── _components.scss│ ├── _overrides.scss│ ├── _variables.scss│ └── overrides│ └── _framework-overrides-go-here.scss├── settings│ ├── _z-index-variables.scss│ ├── │ ├── _breakpoint-variables.scss│ └── _custom-variables.scss└── utilities ├── _functions.scss ├── _mixins.scss ├── _shared.scss └── _typography.scss
THE RESULTSTRUCTURE@import 'settings/z-index-variables';@import 'settings/variables';
@import 'framework/variables';@import 'framework/components';
@import 'settings/breakpoint-variables';
@import 'utilities/functions';@import@import 'utilities/mixins';@import 'utilities/shared';@import 'utilities/typography';
@import 'framework/overrides';
@import 'components/first-component';// more components
@import 'views/home';// more views// more views