CSS architecture: How To Write Clean & Scalable Code

HOW TO WRITE CLEAN & SCALABLE CODECSS ARCHITECTURE

[email protected] /czajkovsky

Mateusz Czajka - senior dev @ netguru.co

IT’S CSS WITH SUPERPOWERSUSE PREPROCESSORS

0.

AND BE CONSISTENT ABOUT ITDEFINE A STYLE GUIDE

1.

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

DEFINE A STYLE GUIDEHOUND

+ =SCSSLINT

THAT YOU NEED TO SUPPORTDETERMINE BROWSERS

2.

DETERMINE BROWSERSAUTOPREFIXER

// in codea { display: flex;}

// outputa { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex}

INTO SMALL PIECESDIVIDE YOUR CODE

3.

AS MANY AS IT MAKES SENSEUSE VARIABLES

4.

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;

IT REALLY HELPS TO KEEP YOUR CODE DRYUSE MIXINS & EXTENDS

5.

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;}

THINK ABOUT RETINA USERSUSE VECTORS

6.

BUT USE IT THE SMART WAYUSE A FRAMEWORK

7.

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";// ...

STRUCTURE AND ORDERTHE RESULT

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

Q&ATHANK YOU

[email protected] /czajkovsky

Mateusz Czajka - senior dev @ netguru.co