10 Commandments for Efficient CSS Architecture [CSSConf.Asia '14]

10 Commandments for Efficient CSS Architecture [CSSConf.Asia '14]

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.

6be4e636e8aacd405bed5cd15124a875?s=128

Kushagra Gour

January 18, 2015
Tweet

Transcript

  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 and Hint.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 . h e

    a d e r { w i d t h : 1 0 0 % ; h e i g h t : 5 0 p x ; / / M a g i c n u m b e r } . s i d e b a r { w i d t h : 1 0 0 p x ; / / M a g i c n u m b e r h e i g h t : 1 0 0 % ; t o p : 5 0 p x ; / / M a g i c n u m b e r } . c o n t e n t { t o p : 5 0 p x ; / / M a g i c n u m b e r b o t t o m : 0 ; l e f t : 1 0 0 p x ; / / M a g i c n u m b e r r i g h t : 0 ; } Too many magic numbers!
  13. Use Variables Better approach $ h e a d e

    r - h e i g h t : 5 0 p x ; $ s i d e b a r - w i d t h : 1 0 0 p x ; . h e a d e r { w i d t h : 1 0 0 % ; h e i g h t : $ h e a d e r - h e i g h t ; } . s i d e b a r { w i d t h : $ s i d e b a r - w i d t h ; h e i g h t : 1 0 0 % ; } . c o n t e n t { t o p : $ h e a d e r - h e i g h t ; b o t t o m : 0 ; l e f t : $ s i d e b a r - w i d t h ; r i g h t : 0 ; }
  14. Use Variables Better approach Less error prone Easy extensibility $

    h e a d e r - h e i g h t : 5 0 p x ; $ s i d e b a r - w i d t h : 1 0 0 p x ; . h e a d e r { w i d t h : 1 0 0 % ; h e i g h t : $ h e a d e r - h e i g h t ; } . s i d e b a r { w i d t h : $ s i d e b a r - w i d t h ; h e i g h t : 1 0 0 % ; } . c o n t e n t { t o p : $ h e a d e r - h e i g h t ; b o t t o m : 0 ; l e f t : $ s i d e b a r - w i d t h ; r i g h t : 0 ; }
  15. Commandment #3 Component Abstraction Thou shalt believe in abstractions

  16. Component Abstractions Scenario: HUD elements on a game screen .

    h u d - s t a t s { p o s i t i o n : f i x e d ; o p a c i t y : 0 . 7 ; f i l t e r : s e p i a ( 9 0 % ) ; b o t t o m : 2 0 p x ; l e f t : 2 0 p x ; } . h u d - m a p { p o s i t i o n : f i x e d ; o p a c i t y : 0 . 7 ; f i l t e r : s e p i a ( 9 0 % ) ; t o p : 2 0 p x ; r i g h t : 2 0 p x ; }
  17. Component Abstractions Scenario: HUD elements on a game screen .

    h u d - s t a t s { p o s i t i o n : f i x e d ; o p a c i t y : 0 . 7 ; f i l t e r : s e p i a ( 9 0 % ) ; b o t t o m : 2 0 p x ; l e f t : 2 0 p x ; } . h u d - m a p { p o s i t i o n : f i x e d ; o p a c i t y : 0 . 7 ; f i l t e r : s e p i a ( 9 0 % ) ; t o p : 2 0 p x ; r i g h t : 2 0 p x ; } Too much repeatition.
  18. Component Abstractions Don't Repeat yourself

  19. Component Abstractions HUD elements on a game screen (Better) .

    h u d - e l e m e n t { p o s i t i o n : f i x e d ; o p a c i t y : 0 . 7 ; f i l t e r : s e p i a ( 9 0 % ) ; } . h u d - s t a t s { b o t t o m : 2 0 p x ; l e f t : 2 0 p x ; } . h u d - m a p { t o p : 2 0 p x ; r i g h t : 2 0 p x ; } < d i v c l a s s = " h u d - e l e m e n t h u d - s t a t s " > 9 9 9 9 < / d i v > No repeation. Much cleaner.
  20. Component Abstractions HUD elements on a game screen (Better)(SASS) %

    h u d - e l e m e n t { p o s i t i o n : f i x e d ; o p a c i t y : 0 . 7 ; f i l t e r : s e p i a ( 9 0 % ) ; } . h u d - s t a t s { @ e x t e n d % h u d - e l e m e n t ; b o t t o m : 2 0 p x ; l e f t : 2 0 p x ; } . h u d - m a p { @ e x t e n d % h u d - e l e m e n t ; t o p : 2 0 p x ; r i g h t : 2 0 p x ; } < d i v c l a s s = " h u d - s t a t s " > 9 9 9 9 < / d i v >
  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: d i v . t a b s { w i d t h : 1 0 0 % ; } < d i v c l a s s = " t a b s " > < / d i v > . t a b s - h a l f { w i d t h : 5 0 % ; } < d i v c l a s s = " t a b s t a b s - h a l f " > < / d i v > WON'T WORK! s t r e n g t h ( d i v . t a b s ) > s t r e n g t h ( . t a b s - h a l f )
  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 ! i m p o r t a n t DIV
  24. Keep Selector Strengths Low No d i v . t

    a b s Simply have . t a b s
  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 - Modifier BEM -

    Component - Sub-part of component - Variation of component Block Element Modifier Supports Component abstraction
  29. Naming Convention : Naming BEM - . c o m

    p o n e n t - . c o m p o n e n t _ _ s u b - p a r t - . c o m p o n e n t - - v a r i a t i o n Block Element Modifier
  30. Naming Convention - Example - Without BEM BEM 20 .

    s l i d e r { p o s i t i o n : r e l a t i v e ; } . s l i d e r . s l i d e r - t r a c k { b a c k g r o u n d : w h i t e ; } . s l i d e r . k n o b { p o s i t i o n : a b s o l u t e ; } / / V a r i a t i o n . s l i d e r . s l i d e r - w i t h - i n p u t . s l i d e r - i n p u t { d i s p l a y : b l o c k ; }
  31. Naming Convention - Example - With BEM BEM . s

    l i d e r { p o s i t i o n : r e l a t i v e ; } . s l i d e r _ _ t r a c k { b a c k g r o u n d : w h i t e ; } . s l i d e r _ _ k n o b { p o s i t i o n : a b s o l u t e ; } / / V a r i a t i o n . s l i d e r - - w i t h - i n p u t . s l i d e r _ _ i n p u t { d i s p l a y : b l o c k ; } 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 - i n d e x - o v e r l a y : 1 ; $ z - i n d e x - s l i d e o u t - b a c k d r o p : 1 ; $ z - i n d e x - s l i d e o u t : 1 ; $ z - i n d e x - s i d e b a r : 2 ; / / a b o v e h e l p p a n e l f o r t o o l t i p s $ z - i n d e x - n a v i g a t i o n : 4 ; / / t o p o f s i d e b a r $ z - i n d e x - h e a d e r : 4 ; $ z - i n d e x - m o d a l - u n d e r l a y : 4 ; / / B e l o w m o d a l - b o x & t o p o f $ z - i n d e x - m o d a l - b o x : 5 ; / / o n t o p o f e v e r y t h i n g
  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 - i n d e

    x : 9 9 9 9 9 ;
  37. Commandment #7 @extend - Avoid Selector Hell Inheritance doesn't always

    gives thou $$$$.
  38. @extend - Avoid Selector Hell Simple example: SASS . e

    r r o r { c o l o r : r e d ; b a c k g r o u n d : # f f 8 8 8 8 ; } . s i d e b a r { . e r r o r { p a d d i n g : 1 0 p x ; } } . e r r o r - n o t i f i c a t i o n { @ e x t e n d . e r r o r ; / / G O N N A B E B A D ! ! ! }
  39. @extend - Avoid Selector Hell Result SASS: CSS: . e

    r r o r { c o l o r : r e d ; b a c k g r o u n d : # f f 8 8 8 8 ; } . s i d e b a r { . e r r o r { p a d d i n g : 1 0 p x ; } } . e r r o r - n o t i f i c a t i o n { @ e x t e n d . e r r o r ; } . e r r o r , . e r r o r - n o t i f i c a t i o n { c o l o r : r e d ; b a c k g r o u n d : # f f 8 8 8 8 ; } . s i d e b a r . e r r o r , . s i d e b a r . e r r o r - n o t i f i c a t i o n { p a d d i n g : 1 0 p x ; } Unnecessary CSS generated
  40. This is REAL!

  41. @extend - Avoid Selector Hell Solution: Use placeholders SASS: CSS:

    % e r r o r { c o l o r : r e d ; b a c k g r o u n d : # f f 8 8 8 8 ; } . e r r o r { @ e x t e n d % e r r o r ; } . s i d e b a r { . e r r o r { p a d d i n g : 1 0 p x ; } } . e r r o r - n o t i f i c a t i o n { @ e x t e n d % e r r o r ; } . e r r o r , . e r r o r - n o t i f i c a t i o n { c o l o r : r e d ; b a c k g r o u n d : # f f 8 8 8 8 ; } . s i d e b a r . e r r o r { p a d d i n g : 1 0 p x ; }
  42. @extend - Avoid Selector Hell We reduced compilation time by

    76%
  43. Play Time :) bit.ly/cssconfasia

  44. Thanks for listening :)