SMACSS - Uma arquitetura modular e escalável para CSS

Criado pelo Yahoo! para resolver problemas de CSS no Yahoo! Mail, acabou virando uma referência de arquitetura CSS. Possui uma documentação bem extensa e até um livro oficial escrito pelo criador. É hoje uma das mais conhecidas e utilizadas arquiteturas de CSS.

Transcript

1. SMACSS Uma arquitetura escalável e modular para CSS
2. SMACSS NÃO É UM FRAMEWORK
3. 5 Príncipios do SMACSS Categorizar Convenção de Nomenclatura Desacoplar Aumentar a Semântica Design Baseado em Estados
4. CATEGORIZAÇÃO Base Layout Module State Theme
5. CONVENÇÃO DE NOMENCLATURA .m-slide { text-align: center; } .l-signup .m-slide { float: left; } Esclareça sua intenção Prefix Modules All css modules start with prefix m-. Just the first class (container) of module. https://github.com/magnetis/styleguide/
6. DESACOPLAR .main-title { color: red; } .list { padding: 4px; } h1 { color: red; } ul { padding: 4px; }
7. SEMÂNTICA CSS .link { text-decoration: underline; } .button { padding: 2px; } .list { padding: 4px; } .list .item { display: inline-block; } HTML <a href=”http://randsonjs.com” class=”link”></a> <a href=”#” class=”button”> <div class=”list”> <p class=”item”>Lorem</p> </div> </a>
8. DESIGN BASEADO EM ESTADOS .is-active { color: blue; } .is-hidden { display: none; } .is-disabled { opacity: .5; }
9. seja você também! SMACSS é livre,
10. Obrigado! Randson Oliveira randsonjs.com http://randsonjs.com/blog/upgraded-my-blog-and-iam-using-smacss /randsonjs /randsonjs