Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

7Masters CSS | SMACSS, por Rafael Lyra

998 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

7Masters CSS | SMACSS, por Rafael Lyra

  1. 1. SMACSS Uma arquitetura escalável e modular para CSS
  2. 2. SMACSS não é um framework
  3. 3. 5 Príncipios do SMACSS Categorizar Ter convenções de nomenclatura Desacoplar Melhorar semântica Ter um design baseado em estados
  4. 4. CATEGORIZAR Base Layout Module State Theme
  5. 5. CONVENÇÃO DE NOMENCLATURA esclareça sua intenção .m-slide { text-align: center; } .l-signup .m-slide{ float: left; }
  6. 6. DESACOPLAR .main-title { color: red; } h1 { color: red; } .list { padding: 4px; } ul { padding: 4px; }
  7. 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. 8. Design baseado em estados .is-active { color: green; } .is-hidden { display: none; } .is-disabled { opacity: .5; }
  9. 9. SMACSS é livre, seja você também.
  10. 10. Thankyou my friends! twitter: @rafaellyra github: /rafaellyra linkedin: /rafaellyra

×