SMACSS
Scalable and Modular Architecture for CSS
OH MY GOD WHY?
- CSS gets unmaintainable
- Small changes
- Take a lot of time
- have unpredictable influences consequences
CONS
- More Classes in HTML
- <button class="btn btn-primary btn-disabled">
Pros
- loose coupling
- higher modularity
- CSS organized like your code
- increase semantics
BTW - Nice to know
CSS gets evaluated from right to left
Soooo uhmm
These are inefficient
- *
- #
- overly qualified selectors
- div#test
- :hover for non-link elements
Here comes Smacss
The Rules
- Only use classes (if not in base rules)
- Don't go deeper than 2 or 3 levels in nesting
- Structure your CSS like your code
Base.css
- Resets
- Styles for all elements only
- html, body {width: 100%}
- * { box-sizing: border-box;}
- one of the few cases you should use *
LayouT.css
- Only rules that define the position of an element
- Define the grid and sections
Modules
progressbar.css | modal.css | slider.css
- Put UI components together
- Prefix the classes
- As small as possible
- so they can be reused
Module
States
Set per JS, representing the state of the component
- is-collapsed
- is-active
- is-folded
- is-sliding
Themes
Only for large projects, with more than one color scheme
(theme_black.css => btn-black {}, sb-black {}, ...)
Benefits
- reuse some styling code
- predict the influence of changes
- have a nice structure
But so many classes ...
Use the @extend keyword in sass to composer bigger UI components
Stats on FC
Stats on DIY
The END
