10 Commandments for efficient CSS architecture [CSSConf.Asia '14]

10* COMMANDMENTSFOR EFFICIENT CSS

ARCHITECTUREYes, CSS can have architecture too!

  Kushagra Gour @chinchang457* Conditions apply.

/meMy name is . Better know as onthe web.

Kushagra Gour chinchang

I am from

Delhi, India

/me moreI am a Front-end developer at a wonderful startup calledWingify.

Open-source stuff like and Hint.css piCSSel-art.

Whats this talk about?Some CSS goodies learnt from experience.

Would help in better CSS architecture. Easy to understandand extend in future. No more Careless Style Sprinkling.

First time speaking at a conference and that too at such abig one. Not really good at speaking & makingpresentations.

// TODO: Add a game if slides don't complete. Good at making games. Added a game we can all playtogether and have fun! Seriously!

Commandment #1

Keep File SizesSmall

"Thy height shalt remain greaterthan thy file sizes at all times"

Keep File Sizes SmallWhy?

It helps keeping things modular.

Important for faster search in future because you knowwhere things are when something needs to be changed.

What?

Keep dividing and refactoring files as and when they get toobig.

1st day of christmas

style.css

4th day of christmas

1. base.css2. helpers.css3. components.css4. theme.css5. mixins.scss (SASS)

8th day of christmas

1. base.css2. helpers.css3. components/

buttons.cssdropdowns.csstooltips.css

4. theme.css

12th day of christmas

Commandment #2

Use VariablesThy code config shalt remain at one

place.

Use VariablesYour layout:

HEADER

SIDEBAR CONTENT

.header { width: 100%; height: 50px; // Magic number}

.sidebar { width: 100px; // Magic number height: 100%; top: 50px; // Magic number}

.content { top: 50px; // Magic number bottom: 0; left: 100px; // Magic number right: 0;}

Too many magic numbers!

Use VariablesBetter approach

$header-height: 50px;$sidebar-width: 100px;

.header { width: 100%; height: $header-height;}

.sidebar { width: $sidebar-width; height: 100%;}

.content { top: $header-height; bottom: 0; left: $sidebar-width; right: 0;}

Use VariablesBetter approach

Less error prone

Easy extensibility

$header-height: 50px;$sidebar-width: 100px;

.header { width: 100%; height: $header-height;}

.sidebar { width: $sidebar-width; height: 100%;}

.content { top: $header-height; bottom: 0; left: $sidebar-width; right: 0;}

Commandment #3

ComponentAbstraction

Thou shalt believe in abstractions

Component AbstractionsScenario: HUD elements on a game screen

.hud-stats { position: fixed; opacity: 0.7; filter: sepia(90%); bottom: 20px; left: 20px;}

.hud-map { position: fixed; opacity: 0.7; filter: sepia(90%); top: 20px; right: 20px;}

Component AbstractionsScenario: HUD elements on a game screen

.hud-stats { position: fixed; opacity: 0.7; filter: sepia(90%); bottom: 20px; left: 20px;}

.hud-map { position: fixed; opacity: 0.7; filter: sepia(90%); top: 20px; right: 20px;}

Too much repeatition.

Component Abstractions

Don't Repeat yourself

Component AbstractionsHUD elements on a game screen (Better)

.hud-element { position: fixed; opacity: 0.7; filter: sepia(90%);}

.hud-stats { bottom: 20px; left: 20px;}

.hud-map { top: 20px; right: 20px;}

<div class="hud-element hud-stats">9999</div>

No repeation. Much cleaner.

Component AbstractionsHUD elements on a game screen (Better)(SASS)%hud-element { position: fixed; opacity: 0.7; filter: sepia(90%);}

.hud-stats { @extend %hud-element; bottom: 20px; left: 20px;}

.hud-map { @extend %hud-element; top: 20px; right: 20px;}

<div class="hud-stats">9999</div>

Commandment #4

Keep SelectorStrengths LowThou shalt spread peace and stop

thy selectors from fighting.

Keep Selector Strengths LowSelectors have strengths...and they do fight!

Example:div.tabs { width: 100%;}

<div class="tabs"></div>

.tabs-half { width: 50%;}

<div class="tabs tabs-half"></div>

WON'T WORK!

strength(div.tabs) >strength(.tabs-half)

Keep Selector Strengths LowHow things get messier...

Either prefix your class name with   tag.

Use the all 'awesome and criticized' 

Plus, tabs can only be made up of   tags.

DIV

!important

DIV

Keep Selector Strengths Low

No div.tabsSimply have .tabs

Commandment #5

NamingConvention

Thou shalt treat your classes as thyown children. Name them with

equal love.

Naming ConventionMost important thing in CSS. Much more important thanany other languauge.

Some things are bad in CSS (ahem...!important) and canbe eliminated through better naming.

Naming Convention

BEMto the rescue

Naming Convention

: Block - Element - ModifierBEM - Component

- Sub-part of component

- Variation of component

Block

Element

Modifier

Supports Component abstraction

Naming Convention

: NamingBEM - .component

- .component__sub-part

- .component--variation

Block

Element

Modifier

Naming Convention

 - Example - Without BEMBEM

20

.slider { position: relative; }

.slider .slider-track { background: white; }

.slider .knob { position: absolute; }

// Variation.slider.slider-with-input .slider-input { display: block; }

Naming Convention

 - Example - With BEMBEM

.slider { position: relative; }

.slider__track { background: white; }

.slider__knob { position: absolute; }

// Variation.slider--with-input .slider__input { display: block; }

Selectors - Less specific. More uniform.

Commandment #6

z-indexManagement

Thou shalt not mix up thy ego andz-indexes

z-index ManagementIssue?

z-index ManagementSeparate them out into your config as variables

$z-index-overlay: 1;$z-index-slideout-backdrop: 1;$z-index-slideout: 1;$z-index-sidebar: 2; // above help panel for tooltips$z-index-navigation: 4; // top of sidebar$z-index-header: 4;$z-index-modal-underlay: 4; // Below modal-box & top of others.$z-index-modal-box: 5; // on top of everything

z-index ManagementChanging existing z-indexes become really easy becauseyou know what might break.

Setting z-index for new UI elements is very easy becauseyou can actually position it in a similar hierarchy.

z-index Management

No morez-index: 99999;

Commandment #7

@extend -Avoid Selector

HellInheritance doesn't always gives

thou $$$$.

@extend - Avoid Selector HellSimple example:

SASS.error { color: red; background: #ff8888;}

.sidebar { .error { padding: 10px; }}

.error-notification { @extend .error; // GONNA BE BAD!!!}

@extend - Avoid Selector HellResult

SASS: CSS:.error { color: red; background: #ff8888;}

.sidebar { .error { padding: 10px; }}

.error-notification { @extend .error;}

.error, .error-notification { color: red; background: #ff8888;}

.sidebar .error,

.sidebar .error-notification { padding: 10px;}

Unnecessary CSS generated

This is REAL!

@extend - Avoid Selector HellSolution: Use placeholders

SASS: CSS:%error { color: red; background: #ff8888;}

.error { @extend %error;}

.sidebar { .error { padding: 10px; }}

.error-notification { @extend %error;}

.error, .error-notification { color: red; background: #ff8888;}

.sidebar .error { padding: 10px;}

@extend - Avoid Selector Hell

We reduced compilationtime by 76%

Play Time :)bit.ly/cssconfasia

Thanksfor listening :)