Richard Duchatsch Johansen
Front-end Developer, expert HTML5/CSS3, SEO, Validation Cross-browser, Semantic Web, Open Web, Responsive Design and Accessibility Specialties: Certification of HTML5 and CSS3 by W3C.br; Visie the Advanced CSS / Tableless;
CSS Reciclável
--- com o uso ---
metodologias
Google Developer Bus 2013 | São Paulo - Brasil
Porque é importante?
O CSS tem que ser:
- Documentável
- Entendível
- Fácil manutenção
- Organizado
- Extensível
Pré processadores de CSS
PRÉ PROCESSADORES DE CSS
Frameworks
http://usablica.github.io/front-end-frameworks/compare.html
Metodologias de CSS
- OOCSS (Object-Oriented CSS)
-
BEM (Block Element Modifier)
-
SMACSS
(Stands for Scalable and Modular Architecture for CSS) - Organic CSS
-
MCSS (Multilayer CSS)
OOCSS
HTML
<div class="header colors-skin"> ... </div>
<div class="colors-skin"> ... </div>
<div class="footer colors-skin"> ... </div>CSS
.colors-skin {
background: #BADA55; color: #000;
}
.header {
width: 960px; margin: 0 auto;
}
.footer {
text-align: center; padding-top: 20px;
}BEM
HTML
<header class="site-header">
<div class="logo"></div>
<div class="navigation"></div>
</header>CSS
.site-header { ... } /* block */
.site-header__logo { ... } /* element */
.site-header__logo--xmas { ... } /* modifier */
.site-header__navigation { ... } /* element */MCSS
http://operatino.github.io/MCSS/en/
SMACSS
http://smacss.com/book/
Organic CSS
https://github.com/krasimir/organic-css
Obrigado
CSS Reciclável com o uso de metodologias
By Richard Duchatsch Johansen
