CSS is a very funny language. That is something we all have realised at some point or the other while working with it. If not used correctly, a language used to make things look good can itself start looking bad and we can end up with CSS that is hard to manage and extend. This talk is about 10 things which I have learnt from experience can make one’s CSS manageable and easy to extend, specially in large scale applications.

1. 10* COMMANDMENTS
FOR EFFICIENT CSS
ARCHITECTURE
Yes, CSS can have architecture too!
Kushagra Gour @chinchang457
* Conditions apply.

2. /me
My name is . Better know as on
the web.
Kushagra Gour chinchang
I am from
Delhi, India

3. /me more
I am a Front-end developer at a wonderful startup called
Wingify.
Open-source stuff like andHint.css piCSSel-art.

4. Whats this talk about?
Some CSS goodies learnt from experience.
Would help in better CSS architecture. Easy to understand
and extend in future. No more
Careless Style Sprinkling.
First time speaking at a conference and that too at such a
big one. Not really good at speaking & making
presentations.
// TODO: Add a game if slides don't complete.
Good at making games. Added a game we can all play
together and have fun! Seriously!

5. Commandment #1
Keep File Sizes
Small
"Thy height shalt remain greater
than thy file sizes at all times"

6. Keep File Sizes Small
Why?
It helps keeping things modular.
Important for faster search in future because you know
where things are when something needs to be changed.
What?
Keep dividing and refactoring files as and when they get too
big.

7. 1st day of christmas
style.css

8. 4th day of christmas
1. base.css
2. helpers.css
3. components.css
4. theme.css
5. mixins.scss (SASS)

9. 8th day of christmas
1. base.css
2. helpers.css
3. components/
buttons.css
dropdowns.css
tooltips.css
4. theme.css

10. 12th day of christmas

11. Commandment #2
Use Variables
Thy code config shalt remain at one
place.

12. Use Variables
Your layout:
HEADER
SIDEBAR CONTENT
.header{
width:100%;
height:50px;//Magicnumber
}
.sidebar{
width:100px;//Magicnumber
height:100%;
top:50px; //Magicnumber
}
.content{
top:50px;//Magicnumber
bottom:0;
left:100px;//Magicnumber
right:0;
}
Too many magic numbers!

13. Use Variables
Better 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;
}

14. Use Variables
Better 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;
}

15. Commandment #3
Component
Abstraction
Thou shalt believe in abstractions

16. Component Abstractions
Scenario: 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;
}

17. Component Abstractions
Scenario: 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.

18. Component Abstractions
Don't Repeat yourself

19. Component Abstractions
HUD 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;
}
<divclass="hud-element hud-stats">9999</div>
No repeation. Much cleaner.

20. Component Abstractions
HUD 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;
}
<divclass="hud-stats">9999</div>

21. Commandment #4
Keep Selector
Strengths Low
Thou shalt spread peace and stop
thy selectors from fighting.

22. Keep Selector Strengths Low
Selectors have strengths...and they do fight!
Example:
div.tabs{
width:100%;
}
<divclass="tabs"></div>
.tabs-half{
width:50%;
}
<divclass="tabstabs-half"></div>
WON'T WORK!
strength(div.tabs)>
strength(.tabs-half)

23. Keep Selector Strengths Low
How 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

24. Keep Selector Strengths Low
No div.tabs
Simply have .tabs

25. Commandment #5
Naming
Convention
Thou shalt treat your classes as thy
own children. Name them with
equal love.

26. Naming Convention
Most important thing in CSS. Much more important than
any other languauge.
Some things are bad in CSS (ahem...!important) and can
be eliminated through better naming.

27. Naming Convention
BEM
to the rescue

28. Naming Convention
: Block - Element - ModifierBEM
- Component
- Sub-part of component
- Variation of component
Block
Element
Modifier
Supports Component abstraction

29. Naming Convention
: NamingBEM
- .component
- .component__sub-part
- .component--variation
Block
Element
Modifier

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

31. 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.

32. Commandment #6
z-index
Management
Thou shalt not mix up thy ego and
z-indexes

33. z-index Management
Issue?

34. z-index Management
Separate 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
$z-index-modal-box: 5; // on top of everything

35. z-index Management
Changing existing z-indexes become really easy because
you know what might break.
Setting z-index for new UI elements is very easy because
you can actually position it in a similar hierarchy.

36. z-index Management
No more
z-index:99999;

37. Commandment #7
@extend -
Avoid Selector
Hell
Inheritance doesn't always gives
thou $$$$.

38. @extend - Avoid Selector Hell
Simple example:
SASS
.error{
color:red;
background:#ff8888;
}
.sidebar{
.error{
padding:10px;
}
}
.error-notification{
@extend.error;//GONNABEBAD!!!
}

39. @extend - Avoid Selector Hell
Result
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

40. This is REAL!

41. @extend - Avoid Selector Hell
Solution: 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;
}

42. @extend - Avoid Selector Hell
We reduced compilation
time by 76%

43. Play Time :)
bit.ly/cssconfasia

44. Thanks
for listening :)