CSS architecture: How To Write Clean & Scalable Code
2 likes1,447 views
1. Structure CSS code into small, reusable pieces like components and mixins. Define a style guide and use Sass features like variables, extends and mixins. 2. Determine supported browsers and use a preprocessor like Autoprefixer to avoid browser prefixes. 3. Organize CSS into folders for components, views, and a framework to structure application styles. Import files in a logical order.
CSS architecture: How To Write Clean & Scalable Code
- 4. DEFINEASTYLEGUIDESCSSLINT .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 be preceded by one space, Line 38, Column 8
- 7. DETERMINEBROWSERSAUTOPREFIXER // in code a { display: flex; } // output a { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex }
- 10. USEVARIABLESBASICS // 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;
- 11. USEVARIABLESZINDEXES // view/component .settings-modal { // ... z-index: $z-index-settings-modal; } .avatar-popover { // ... z-index: $z-index-avatar-popover; }
- 12. USEVARIABLESZINDEXES // _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;
- 14. USEMIXINS&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; }
- 15. USEMIXINS&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; }
- 18. USEAFRAMEWORKSTRUCTURE framework ├── _components.scss ├── _overrides.scss ├── _variables.scss └── overrides └── _framework-overrides-go-here.scss
- 19. USEAFRAMEWORKCOMPONENTS // 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"; // ...
- 20. USEFRAMEWORKVARIABLES // 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...
- 21. USEAFRAMEWORKOVERRIDES // 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"; // ...
- 23. THERESULTSTRUCTURE ├── 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
- 24. THERESULTSTRUCTURE @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