ARQUITETURA CSS
Parte 1
Só de ouvir falar de CSS muitas pessoas tremem… O CSS pode ser um monstro quando não temos padrões bem definidos no projeto. Nesses anos trabalhando com front-end tenho conhecido muita gente que tem dificuldades e até medo do CSS.
Tendo em vista a produtividade, manutenção e legibilidade do código, várias arquiteturas de projetos surgiram para facilitar a nossa vida, mas porque nunca ouvi falar disso? As pessoas tendem a não dar importância ao estilo da página por não ser algo lógico, não ter regras de negócio atreladas e pelo simples fato de que o estilo não tem importância quando falamos de programação.
Estamos vivendo um momento de revolução no CSS, pré-processadores, frameworks, arquiteturas, CSS3 trazendo novos etilios e seletores. Não é apenas no CSS que o front-end evoluiu, hoje apenas com HTML, CSS e JS conseguimos trabalhar em grandes sistemas, sites, softwares e até mesmo aplicativos híbridos. Os sistemas estão ficando cada dia maiores, equipes com cada vez mais desenvolvedores e por tanto mais pessoas alterando o mesmo código ao mesmo tempo.
Muito se fala em padrões de projeto para JavaScript, mas esquecem que o CSS também é uma das partes fundamentais do projeto e uma das mais complexas. Diversos navegadores e versões e também dispositivos.
Com a chegada dos pré-processadores temos hoje ótimas ferramentas para otimização do nosso desenvolvimento e deixar o nosso código mais robusto. É preciso ter uma boa estrutura, modularização de arquivos e padrão de classes.
PARA QUE PADRÕES?
Não podemos pensar apenas no nosso umbigo, pense que mais pessoas farão uso do código e você mesmo no futuro irá precisar entender o que escreveu e para que serve cada parte do código CSS.
Já que tem que pensar de qualquer forma, pense grande! (Donald Trump)
Qual é o limite do seu código? Que proporções ele pode tomar até que fique tão confuso manter que precisará repensar toda a arquitetura? Não pense pequeno, o tamanho do CSS tende ao infinito quando estamos falando de grandes projetos. Uma boa arquitetura te ajuda a escrever menos fazendo mais e aumenta em muito a escalabilidade do seu código.
Organização pode impactar na performance da página, códigos legados serão removidos sem dores de cabeça e com a modularização poderá haver CSS específico por página, tornando o carregamento dos arquivos mais rápida por serem mais leves. Além é claro de tornar o código legível onde qualquer pessoa que chegue depois possa entender.
METODOLOGIAS
Existem várias metodologias de CSS, mas me basearei nas 3 principais. Todas as metodologias que conheço e que pesquisei tem basicamente os mesmos objetivos e em muitos aspectos elas se parecem.
1. OOCSS
Object Oriented CSS
A orientação a objetos no CSS surgiu com base na metodologia aplicada na programação em diversas outras linguagens. Parte do princípio de que deve haver uma separação da estrutura e o visual, também uma separação do container e conteúdo.
1.1 Separa a estrutura do visual (ou skin)
http://codepen.io/neysimoes/pen/azXdrg
Nesse exemplo fica claro como podemos utilizar a orientação a objetos a fazer diversas versões de um mesmo componente usando a mesma estrutura e base; mudando apenas o visual, como cor, caixa alta ou caixa baixa, icone, tamanho… Podemos usar o OOCSS para modularizar o código reaproveitando as estruturas em diversos casos, mantendo um padrão, porém diferenciando vários comportamentos.
1.2 Separa conteúdo do contexto
Pensando nas páginas web, seja ela um portal, blog, site institucional, e-commerce, entre outros, sempre temos uma divisão dos conteúdos e áreas do site. Com o HTML5 fica até mais fácil de separar semanticamente usando tags como: header, main, footer, article, aside, section…
Normalmente nós precisamos repetir estruturas no CSS que irão afetar mais de um contexto do site, exemplo:
.post-content {
font-family: Arial;
letter-spacing: .01rem;
font-weight: 400;
font-style: normal;
font-size: 22px;
line-height: 1.5;
}
.container-inner {
position: relative;
width: 700px;
margin: 0 auto;
}Neste caso o .container-inner é uma classe de estrutura que pode ser reutilizada em diversos momentos, independente do contexto seja ele para centralizar o menu, ou para estruturar conteúdo de texto.
<header class="container">
<nav class="container-inner"></nav>
</header><main class="container">
<section class="container-inner post-content">
Lorem ipsum
</section>
</main>
2. SMACSS
Scalable and Modular Architecture for 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.
O sistema é baseado em cinco principais categorias: base, layout, module, state e theme.
2.1 BASE
A base é aplicada a seletores de elementos sem o uso de classes ou IDs, também inclui pseudo-classes e filhos usando apenas seletores de elementos. Isso define o estilo padrão da página, mesmo sem colocar nenhuma classe como os elementos irão se comportar.
Na base normalmente colocamos o CSS reset como o do Eric Meyer ou o normalize.css do Nicolas Gallagher.
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}2.2 Layout
O layout é onde colocaremos os estilos das estruturas que não se repetem na página como header, footer, sidebar, main e todo resto que não é componente ou estrutura reutilizável.
Um exemplo bem claro disso podemos ver em frameworks CSS onde temos estruturas prontas que formam o layout da página. Além as estruturas maiores como header, footer e outras já citadas, podemos colocar também o grid usado e os wrappers ou containers.
.container-main {
width: 980px;
margin: 0 auto;
position: relative;
padding-left: 20px;
padding-right: 20px;
}#header {
@include clearfix();
background: #fff;
border-bottom: 1px solid #ccc; .logo {
float: left;
padding: 10px 20px;
}}
#footer {
@include clearfix();
background: #999;
border-top: 1px solid #ccc; .map-links {
float: left;
padding: 10px 20px;
color: #f0f0f0;
}
}
2.3 Module
O módulo é responsável por determinar as partes reutilizáveis, os componentes. Dentro do módulo componentes como botões, lightbox, alertas, menu de navegação, widgets, estilos de blocos de texto, entre outros.
.button {
display: inline-block;
box-shadow: none;
background: none;
border: none;
text-transform: uppercase;
padding: 10px;
background: #CFCFCF;
font-size: 14px;
}.button-ico {
padding: 10px 10px 10px 30px;
position: relative; &:before {
content: "";
display: block;
width: 20px;
height: 20px;
position: absolute;
left: 7px;
top: 7px;
}}.tb-big-title {
margin-top: 0;
padding-right: 150px;
font-size: 2.3rem;
}
2.4 State
State ou estado em português, como o nome diz determina o estado do elemento. No caso de um elemento que será modificado ou terá alguma alteração, seja ela feita por JavaScript, ou por ser uma marcação daquela página.
Temos como exemplos estados:
- .is-active
- .is-selected
- .is-visible
- is-hidden
- is-collapsed
Todo estado recebe o prefixo .is- para diferenciar das outras classes, mostrando assim que ela determina um estado modificado daquele elemento.
2.5 Theme
O tema é a parte que menos tem aplicação na maioria dos projetos, é usada para separar a parte que dá um novo design para a página. Foi criada para resolver um problema específico do Yahoo! Mail onde o usuário poderia mudar o layout da caixa de email.
Define um conjunto de estilos como cores, backgrounds, imagens e até fonte family, mas pensando na possibilidade em que terá mais de uma versão do mesmo site ou aplicação e não na estilização de um único design.
Um exemplo de uso seriam em e-commerces que alteram o layout de acordo com a pessoa que acessa. Sabendo que aquele usuário é um homem e torcedor do palmeiras (por exemplo), a página pode apresentar elementos verdes nas cor do time e dar uma sensação de algo personalizado.
3.0 BEM
Block, Element, Modifier
