RSCSS Reasonable System for CSS - Como construir um CSS sustentável (ou sem perder sua sanidade)

Nesta apresentação, falamos sobre metodologias em CSS, em específico RSCSS e suas atribuições

Transcript

1. RSCSS Reasonable System for CSS Como construir um CSS sustentável (ou sem perder sua sanidade)
2. Por que usar metodologias para CSS?
4. CSS: leitura clara?
5. Nomenclatura BEM no HTML
6. Por que RSCSS? • CSS mais limpo • Componentes autossuficientes • Responsabilidade única
7. O que são componentes? • Autosuficiente • Genérico • Reutilizável
8. Componentes Nomear componentes com, pelo menos, duas palavras .like-button .search-form .article-card .section-custom-header
9. Elementos • Nomear com uma palavra • Se precisar de mais de uma palavra, use concatenação • Child Selector • Use nomes de classe sempre que possível em vez de seletores HTML
10. Variações Nomes de classes que representam variações começam com um traço( - ) Componentes e Elementos podem ter variações
11. Componentes aninhados Variações no componente interno em vez de tentar alcançar através do componente que o contém
12. • Evitar propriedades de posicionamento em componentes ◦ Exceto elementos com tamanho fixo (avatares, logos, etc.) • Se necessário, utilize um componente que engloba outro Layouts
13. Classes auxiliares (helpers) • Classes CSS de propósito geral que sobrepõem valores • Nomeadas com _ (underline) • Arquivo único para todos os helpers
14. • Um arquivo *.sass por componente; • Arquivo principal incluindo componentes via glob. Ex.: // index.sass @import 'components/*'; Mais considerações
15. Dúvidas?
16. Obrigada :) @joelwallis1 /joelwallis @mari_lih /alinembl