Hoje em dia quando o assunto é CSS muito se fala em modularização e arquitetura de código. Mas o que de fato é isso? Quais abordagens podemos utilizar para tornar o código do nosso CSS mais organizado?
Nessa apresentação procuro passar uma visão geral das técnicas mais populares, detalhando suas particularidades e a ideologia por traz de cada uma.
Também falo de técnicas mais recentes que abordam o desenvolvimento de CSS de perspectivas diferentes e algumas dicas gerais de como deixar seu código mais flexível a mudanças.
9. Conteúdo
Apresentação (e agora também animações)
Comportamento e interações mais complexas
ⓞ http://alistapart.com/article/understandingprogressiveenhancement
28. ›❯ Utilizado por elementos fixos da aplicação;
›❯ Seletor único, não reutilizável;
›❯ Variações são representadas por classes com o prefixo l .
Técnicas → SMACSS → Layout
41. ›❯ Facilitar a manutenção de projetos de longa duração;
›❯ Facilidade de entendimento do código;
›❯ Diminuir curva de aprendizado em novos membros do time;
›❯ Reutilização de código.
Técnicas → BEM
55. ›❯ Utiliza-se hífen para separar palavras em nomes longos;
›❯ Underscore duplo para separar um bloco de um elemento;
›❯ PascalCase e camelCase são aceitos.
Técnicas → BEM → Nomenclatura
60. ›❯ Utiliza-se camelCase para separar palavras em nomes longos;
›❯ Utilitários devem começar com o prefixo u .
Técnicas → SUIT CSS → Nomenclatura
61. /* Definição de um componente */
.MyComponent {}
/* Definição de um estado */
.MyComponent.is-animating {}
/* Definição de um modificador */
.MyComponent--modifier {}
/* Definição de subelementos */
.MyComponent-part {}
.MyComponent-anotherPart {}
Técnicas → SUIT CSS → Nomenclatura
98. Uma adaptação das partes que julgamos
boas em algumas técnicas populares
CSS na Magnetis
99. ›❯ Conceito de categorização do SMACSS;
›❯ Conceito de estados do SMACSS;
›❯ Conceito de elementos do BEM;
›❯ Conceito de modificadores do SUIT CSS.
CSS na Magnetis
100. ›❯ Sass com a sintaxe SCSS;
›❯ Autoprefixer;
›❯ Sistema de grid Susy;
›❯ Breakpoint;
›❯ SVG;
›❯ Rails (partials & Sprockets = ❤);
›❯ Bower.
CSS na Magnetis
101. /* Componente sidebar */
.accordion {}
/* Componente sidebar no estado expandido */
.accordion.is-expanded {}
/* Modificador `big` do componente botão */
.button--big {}
/* Componente `menu` */
.menu {}
/* Componente `menu-item` */
.menu-item {}
/* Para definir estados, utilizamos `is`, `has`, `should` e `can` */
.menu-item.has-icon {}
/* Elemento `icon` dentro do componente `menu` */
.menu-item__icon {}
CSS na Magnetis
107. Resolve problemas de “depth of applicability”
Pontos positivos
profundidade de aplicabilidade
108. Evita depender de como o markup está estruturado
na hora de criar estilos
Pontos positivos
109. <style>
navigation ul li a {
color: #c0ffee; /* valores hexadecimais sempre em minúsculo, pfv */
}
</style>
<navigation>
<ul>
<li><a href="/meetup-css">Meetup CSS</a></li>
<li><a href="/femug-sp">FEMUG-SP</a></li>
</ul>
</navigation>
Pontos positivos
111. A ideia de componentes pequenos e com pouca responsabilidade
evita problemas de performance na renderização da página e
também problemas com especificidade de seletores
Pontos positivos
112. Navegadores começam a renderizar a página
antes mesmo do documento estar completamente carregado,
fazendo uma leitura da direita pra esquerda
Pontos positivos
113. Evitar excesso de detalhes nos seletores
é uma boa prática
Pontos positivos
114. ul#menu > li {
text-align: right;
}
Pontos positivos
125. /* =================================================================
Grid layout
================================================================= */
/**
* Column layout with horizontal scroll.
*
* This creates a single row of full-height, non-wrapping columns that can
* be browsed horizontally within their parent.
*
* Example HTML:
*
* <div class="grid">
* <div class="cell cell-3"></div>
* <div class="cell cell-3"></div>
* <div class="cell cell-3"></div>
* </div>
*/
Não existe bala de prata