Organizing CSS


Amanda Cheung
Front-end Dev at DockYard




SMACSS


Scalable and Modular 

Architecture for CSS


Jonathan Snook

Organization by Category

Base: CSS resets and element defaults
Layout: Major component positioning and layout, grid system
Module: Minor component styling
State: Styling different states of a module
Theme: Theming options

Naming Conventions

Layout:
 <aside class='l-aside aside'>

State:
<div class='is-expanded'><div class='is-collapsed'><a class='is-active'>

Decouple styles from layout

<aside>
  <div>    <a>Call to action!</a>  </div></aside>
aside div a {  font-weight: bold;  color: purple;}

Decouple styles from layout

Extract patterns into reusable modules

<aside>
  <div>    <a class='cta-link'>Call to action!</a>  </div></aside>
.cta-link {  font-weight: bold;  color: purple;}




BEM


Block, element, modifier


.footer__buttons--eventbrite:before {  content: "E";}.footer__buttons--twitter:before {  content: "T";}



Code Smells

What constitutes a code smell?

Styles that undo other styles

.aside {  margin: 0;  padding: 0;}
.email-link {  text-decoration: none;}
.logo {  display: none;}

Overlapping media queries

Problem: 

@media (max-width: 300px) {
  div {background-color: blue;}
}

@media (max-width: 800px) {
  div {background-color: red;}  
}

@media (max-width: 1200px) {
  div {background-color: green;}
}

Solution:

@media (max-width: 320px)@media (min-width: 320px) and (max-width: 680px)@media (min-width: 680px) and (max-width: 1200px)




More Code Smells

Harry Roberts' blog: CSS Wizardy



Thanks!

Made with Slides.com