SMACSS Your Sass Up Mina Markham – Front Porch Front-End Developers Conference, Dallas, TX

Presented by Mina Markham

SMACSS is not a framework. It’s an approach to authoring your style sheets. You can use

categorization

– base,
– layout, modules, states and themes

base styles are bare minimum (css reset)
layout styles are the grid system and any defining elements of your site (header/nav/etc)
modules is where you write the bulk of the css. components of pages
states are the active, collapsed, hidden or other states of your modules. You can use a separate naming convention for these
themes don’t always apply, but a theme can be a new skin for modules

base uses standard tags
layout can use a .layout prefix for your styles
modules use the name of the module
state styles can use a .is- prefix
theme can use .theme- prefix

Depth of Applicability – selector from hell
When you deeply nest a selector, you increase the chance that the selector will break if the css changes. Adding a selector with a prefix helps avoid nesting. .nav-subitem a

Use naming conventions, class selectors and don’t nest more than one child deep.

Add some Sass

Uses the &- or &_ to prefix names

nesting – The Inception Rule [don’t go more than 3 levels deep]

.btn{…}
.btn-large{…}

@extend the main module, which means you don’t have to add both classes in the html.