Upload
kushagra-gour
View
89
Download
0
Embed Size (px)
Citation preview
10* COMMANDMENTSFOR EFFICIENT CSS
ARCHITECTUREYes, CSS can have architecture too!
Kushagra Gour @chinchang457* Conditions apply.
/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.
8th day of christmas
1. base.css2. helpers.css3. components/
buttons.cssdropdowns.csstooltips.css
4. theme.css
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;}
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 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
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
: 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.
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.
@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
@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;}