Rafael Lyra é programador na Leroy Merlin e manager do FEMUG-SP. Nesta talk, falou sobre SMACSS.

1. SMACSS
Uma arquitetura escalável e modular para CSS

2. SMACSS não é um framework

3. 5 Príncipios do SMACSS
Categorizar
Ter convenções de nomenclatura
Desacoplar
Melhorar semântica
Ter um design baseado em estados

4. CATEGORIZAR
Base
Layout
Module
State
Theme

5. CONVENÇÃO DE
NOMENCLATURA
esclareça sua intenção
.m-slide { text-align: center; }
.l-signup .m-slide{ float: left; }

6. DESACOPLAR
.main-title { color: red; } h1 { color: red; }
.list { padding: 4px; } ul { padding: 4px; }

7. 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>

8. Design baseado em estados
.is-active { color: green; }
.is-hidden { display: none; }
.is-disabled { opacity: .5; }

9. SMACSS é livre,
seja você também.

10. Thankyou my friends!
twitter: @rafaellyra
github: /rafaellyra
linkedin: /rafaellyra