SMACSS Uma arquitetura escalável e modular para CSS

SMACSS não é um framework

5 Príncipios do SMACSSCategorizar

Ter convenções de nomenclatura Desacoplar

Melhorar semântica Ter um design baseado em estados

CATEGORIZAR

Base

Layout

Module

State

Theme

CONVENÇÃO DE NOMENCLATURA

esclareça sua intenção

.m-slide { text-align: center; }

.l-signup .m-slide{ float: left; }

DESACOPLAR

.main-title { color: red; } h1 { color: red; }

.list { padding: 4px; } ul { padding: 4px; }

SEMÂNTICA.button { padding: 2px; }.link { text-decoration: underline; }

<a href=“#” class="button">

<a href=“http://imasters.com.br” class="link">

.list { padding: 4px; }

.list .item{ display: inline-block; }

<div class="list"> <p class="item">Lorem</p> </div>

Design baseado em estados

.is-active { color: green; }

.is-hidden { display: none; }

.is-disabled { opacity: .5; }

SMACSS é livre,seja você também.

Thankyou my friends!

twitter: @rafaellyra github: /rafaellyra

linkedin: /rafaellyra