SMACSS e CSS faz BEM, muito BEM! Veja como trabalhar melhor com o seu front-end. Como organizar, como usar padrões e como ser feliz e fazer o BEM usando SMACSS.
SMACSS e CSS faz BEM, muito BEM! Veja como trabalhar melhor com o seu front-end. Como organizar, como usar padrões e como ser feliz e fazer o BEM usando SMACSS.
Tabuada de pitágoras padrões e regularidadesGoretti Silva
Almeja-se que os alunos observem relações entre variáveis, descrevam e criem uma ampla gama de padrões, com a finalidade de dar um sentido matemático importante à ideia de generalização.
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.
BEM, OOCSS, SMACSS etc. Todas estes modelos de arquitetura de CSS tem como principal objetivo reaproveitamento de código e um código bem organizado. Nestes slides, dou uma rápida introdução em alguns modelos, porque utiliza-los e em que momento ele melhor se aplica.
Uma básica introdução a respeito do que é o Bootstrap, fazendo referências sobre o que é a grid, conceito e metodologia de trabalho oriundos do mundo do design gráfico. Bem como uma rápida explicação do LESS, o que é e como funciona.
Tabuada de pitágoras padrões e regularidadesGoretti Silva
Almeja-se que os alunos observem relações entre variáveis, descrevam e criem uma ampla gama de padrões, com a finalidade de dar um sentido matemático importante à ideia de generalização.
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.
BEM, OOCSS, SMACSS etc. Todas estes modelos de arquitetura de CSS tem como principal objetivo reaproveitamento de código e um código bem organizado. Nestes slides, dou uma rápida introdução em alguns modelos, porque utiliza-los e em que momento ele melhor se aplica.
Uma básica introdução a respeito do que é o Bootstrap, fazendo referências sobre o que é a grid, conceito e metodologia de trabalho oriundos do mundo do design gráfico. Bem como uma rápida explicação do LESS, o que é e como funciona.
CSS´s Dinâmicos com LESS e SASS - SEMCOMP 2012André Paulovich
Nesta palestra, vamos abordar um tema muito comum e de fácil aprendizagem. Todo desenvolvedor que trabalhe com internet hoje em dia, precisa aprender a tornar a linguagem de marcação CSS (Cascading Style Sheets) utilizada para definir a apresentação dos documentos HTML em uma linguagem completamente nova e poderosa, capaz de oferecer grande produtividade. Vamos explorar diferentes frameworks como SASS e LESS e suas vantagens e desvantagens.
2. Wellington Dutra |
● Web Developer há 8 anos
● Ativo como backend (PHP, Ruby), mas prefiro frontend
● Apaixonado por CSS e JS
● Não gosto de Twitter, não me procurem por lá!
3. CSS pode ser uma bagunça!
O resultado final quase sempre é...
• Não importa o quanto você acha o seu código limpo,
organizado;
• Se você usa SASS, LESS, PostCSS ou se você acredita em
Deus;
10. Abstraindo um layout em componentes/módulos
● Não levar em conta a página como um todo;
● Encontrar padrões de design e disposição de elementos;
● Aplicar estilos orientados a componentes.
19. BEM - O que significa? De onde vem?
Block Element Modifier é um padrão de nomenclatura
para seletores CSS, criado pelos caras da Yandex, uma
empresa de internet famosa na Europa.
20. BEM - Benefícios
● Facilita a compreensão da função de um seletor CSS,
simplesmente interpretando o nome desse seletor;
● Ótimo para quem trabalha em times;
● Manutenção facilitada, mesmo depois de muito tempo
sem contato com o código;
● Pequenas mudanças não alteram o que já está
implementando, diminuindo a chance de BUGs;
21. BEM - Estrutura .block__element--modifier
● .block é o nível de abstração mais alto de um componente.
O que podemos entender como o container, wrapper. É a
classe pai de um componente.
Exemplos
.article{...}
.slide{...}
.box{...}
22. BEM - Estrutura .block__element--modifier
● __element é o elemento filho de um componente. Podemos
ter mais de um elemento, e ainda elementos dentro de
elementos.
Exemplos
.artigo__titulo{...}
.slide__imagem__creditos{...}
.box__texto{...}
23. BEM - Estrutura .block__element--modifier
● --modifier é uma característica que um elemento ou bloco
pode ter que o diferencia do padrão estabelecido.
Exemplos
.artigo__titulo--destaque{...}
.slide__imagem__creditos--topo{...}
.box__texto--azul{...}
24. BEM - Estrutura .block__element--modifier
● __ Dois underscores são usados para separar a classe pai
de seus elementos filho;
● -- Dois hífens são usados para separar a classe pai ou um
elemento filho de um modificador;
Exemplos
.artigo__titulo--destaque{...}
.slide__imagem__creditos--topo{...}
.box__texto--azul{...}
26. BEM, sem limites!
Não há limites para o nome de uma classe, e o equilíbrio
depende do nível de abstração que você aplicar ao seu
componente.
27. BEM - Como usar, na prática
Após a abstração dos componentes de um layout, o próximo passo é
criar a marcação e as classes:
● Quanto mais abstração, melhor;
● Quanto mais independente for o componente do contexto em
que está, melhor;
Essas regras são essenciais, pois o componente pode ser reutilizado
em qualquer contexto com pouca ou nenhuma modificação de
estrutura.
28. BEM - Como usar, na prática | Blocos e Elementos
.articles {}
.articles__article {}
.articles__article__title {}
.articles__article__subtitle {}
.articles__article__image {}
.articles__article__summary {}
.articles__article__more {}
29. BEM - Como usar, na prática | Modificadores
.articles--short {}
.articles--short__article {}
.articles--short__article__image {}
.articles--short__article__summary {}
38. BEM - Contradição?
Mas e quanto a esses seletores profundamente
aninhados?
Esse sujeito de BEM não respeita a regra de
especificidade máxima de 3 níveis para um seletor CSS?
43. SMACSS - Smacks?! <3
● Scalable and Modular Architecture for CSS não é um
framework, nem uma biblioteca, mas sim um guia para
estruturar estilos de maneira inteligente e
escalonável;
● Não importa o tamanho do projeto, esse padrão de
organização combinado com o BEM pode facilitar e
agilizar ainda mais o desenvolvimento e manutenção
do seu código.
45. SMACSS - Estrutura | Diretório base
base: Neste diretório, são colocados os arquivos com os
estilos para elementos base, por exemplo: body, p, a, ul,
span. Arquivos de CSS reset também devem ser colocados
aqui.
47. SMACSS - Estrutura | Diretório layout
layout: Estilos relacionados a estrutura de templates, por
exemplo, um sistema de grid, estilos de regiões genéricas
da página, como .header, .footer, .articles, .secondary-
articles, .wrapper, .sidebar.
49. SMACSS - Estrutura | Diretório modules/components
modules/components:
● Subdiretórios podem ser definidos para separar cada
componente;
● Depende do nível de abstração que você aplicar.
Quanto mais complexo o componente, mais sentido
faz usar subdiretórios para dividí-lo em partes.
51. SMACSS - Estrutura | Diretório states
states: Diretório opcional. Estilos referentes aos estados
de cada um de seus componentes. :hover, :active,
disabled, focus…
57. SMACSS - Estrutura | Diretório shame
shame: Diretório opcional. Hacks para o IE, !important e
coisas vergonhosas que temos que fazer de vez
enquando. xD
58. SMACSS - Como compilar tudo num CSS boladão?
Usando uma ruby gem chamada sass-globbing
● Na raiz do seu diretório sass, crie um arquivo .scss que importará os
arquivos de todas as pastas criadas seguindo o modelo do SMACSS;
● Uma das desvantagens é o tempo que
a compilação pode levar, dependendo
da quantidade de arquivos.
São segundos, mas se você usa
livereload, vai sentir a diferença.
59. SMACSS - Como compilar tudo num CSS boladão?
Usando arquivos de índice:
● Dentro de cada um dos diretórios definidos seguindo o SMACSS, crie uma
_partial chamada _index.scss, e nesse arquivo, importe todos as outras
_partials onde se encontra;
● Na raiz do diretório sass, crie um arquivo styles.scss e importe todos as
parciais _index.scss de cada um dos diretórios.
63. Organizar para agilizar!
Organização é a chave para evitar problemas graves em projetos de
Frontend. A maioria dos BUGs gerados são por falta de organização e
padronização dos projetos.