https://goo.gl/Bf1Wk6
Front End Engineer @ WebRadar
Membro do GT de Acessibilidade @ W3C.br
Fundador/Curador @ FrontInterior
Fundador/Curador @ FEMUG-RJ
CSS é notoriamente difícil de gerir, isto porque o atualmente o ele carece de um mecanismo de escopo
Por esta causa, tudo no CSS é global!
Isso significa que qualquer alteração feita tem o potencial de alterar o que é renderizado no navegador.
Os preprocessadores de CSS, como Sass, Less e Stylus tornam isto mais fácil, oferecendo recursos que torna mais fácil a forma escrever e gerir CSS.
Mas sozinhos os preprocessadores, não realmente resolver o problema de escalabilidade.
Sempre houve a necessidade de utilizar/desenvolver uma metodologia de CSS afim de organizar e proporcionar ao nosso código ser escalável e mantível.
Basicamente o CSSOM é uma representação da formatação do documento. Ele lista as instruções e regras de estilos dos elementos.
Quando o browser carrega todos os estilos dos objetos da página, o browser aplica os estilos da regra mais genérica, recursivamente, para a mais específica, refinando os estilos aplicados. Por isso o termo Cascading (Cascata) no nome CSS.
!important classes
0 0 0 0
IDs elementos |
div.content p !important |
#main div.content p |
As metodologias ajudam organizar CSS de uma forma que nos permite desenvolver, manter e escalar o front-end como um conjunto de módulos, pequenos e isolados.
A adoção de uma metodologia CSS, mesmo que seja um que você crie uma própria, vai tornar mais fácil para você projetar e interagir em seus projetos de web design independente da escala e complexidade.
Cada metodologia CSS oferece um conjunto ligeiramente diferente de soluções para o problema CSS escalabilidade / manutenção. A metodologia CSS, muitas vezes, servem para:
Não existe "a melhor" metodologia CSS.
A melhor metodologia é aquela que se adapta para indivíduos / equipes / projetos.
#TumDumPah
Atomic Design é uma metodologia de CSS criada por Brad Frost.
A essência é basicamente para planejar e desenvolver um projeto, criando atomos individuais que, quando combinados e colocados juntos, geram moléculas, organismos, modelos e páginas
stylesheets/
|- application.sass
|- utilities/
| |- _variables.sass
|- atoms/
| |- _headings.sass
|- molecules/
| |- _search_form.sass
|- organisms/
| |- _header.sass
|- templates/
|- _index_page.sass
Estrutura de arquivos seguindo a metodologia
Atomic Design
CSS Orientado a Objetos de Nicole Sullivan, mais conhecido como OOCSS, foi lançado em 2009.
Foi a primeira metodologia CSS que se tornou amplamente adotada. Ainda hoje é muito influente.
OOCSS ajuda na separação da estrutura da SKIN. A metodologia faz uma distinção clara entre o conteúdo e os seus recipientes.
Em OOCSS, regras de estilo são escritos exclusivamente usando seletores de classe CSS.
O Bootstrap utiliza muito este conceito em seu Framework
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-default btn-sm">Small button</button>
<button type="button" class="btn btn-link btn-xs">Extra small</button>
Em OOCSS, regras de estilo são escritos exclusivamente usando seletores de classe CSS.
OOCSS ajuda na separação da estrutura da SKIN. A metodologia faz uma distinção clara entre o conteúdo e os seus recipientes.
stylesheets/
|- application.sass
|- utilities/
| |- _variables.sass
|- objects/
| |- _header.sass
| |- forms/
| | |- _forms.sass
| |- layout/
| |- _index_page.sass
|- pages/
|- _home_page.sass
Estrutura de arquivos seguindo a metodologia
OOCSS
Block Element Modifier, mais conhecido de BEM, é um sistema CSS baseado em nomeação de classes elaborado pela equipe de desenvolvimento em Yandex (o Google da Rússia).
A idéia por trás BEM é diferenciar as classes CSS que cumprem diferentes papéis. Isso é feito por nomeação de classes CSS de uma forma que indica o seu papel.
Esta é a sintaxe de nomeação de classes no BEM
.block
.block--modifier
.block__element
.block__element--modifier
Na nomenclatura BEM, um BLOCK é um componente de interface independente, modular. Um BLOCK pode ser composto de vários elementos HTML, ou mesmo vários blocos. Um exemplo de um bloco pode ser o seu menu de navegação ou formulário de busca.
Um ELEMENT é um componente de um block. Um ELEMENT serve a um propósito único.
Por exemplo, se você tem um block do menu de navegação e depois os ELEMENTS de que podem ter ligações com o menu de navegação. Sendo eles itens da lista (<li>) e links (<a>).
Um MODIFIER é uma classe de CSS que altera a apresentação padrão de um bloco ou elemento.
Estrutura de arquivos seguindo a metodologia
(OOCSS + BEM)
BEM complementa OOCSS, porque OOCSS não impõe qualquer convenção de nomenclatura de classe especial.
stylesheets/
|- application.sass
|- utilities/
| |- _variables.sass
|- objects/
| |- blocks/
| | |- _form.sass
| |- elements/
| |- _form__input.sass
| |- modifiers/
| |- _form__input--footer.sass
|- pages/
|- _home_page.sass
Inverted Triangle architecture for CSS é uma maneira de pensar arquiteturas CSS. Ele embasa suas decisões a partir de bons princípios criados e testados durante anos por Harry Roberts (@csswizardry).
A ideia por trás do ITCSS é organizar seu CSS como se ele fosse um triângulo invertido, formado por diversas camadas. Essas camadas devem ser organizadas da mais genérica para a mais específica. Da base para o topo. Uma boa organização então seria:
O foco do ITCSS é melhorar a especificidade do CSS baseadas no CSSOM (CSS Object Model)
stylesheets/
|- application.sass
|- critical.sass
|- base/
|- components/
|- generic/
|- objects/
|- settings/
|- tools/
|- trumphs/
|- vendor/
Estrutura de arquivos seguindo a metodologia
(https://github.com/gpmd/itcss-boilerplate)
É exatamente o que adotamos quando queremos unir o melhor de cada metodologia sem perceber. Isso parece loucura, mas faz sentido quando você olha as metodologias faladas anteriormente.
É exatamente o que adotamos quando queremos unir o melhor de cada metodologia sem perceber. Isso parece loucura, mas faz sentido quando você olha as metodologias faladas anteriormente.
$color--primary: #b29;
$color--secondary: #19d;
%btn--base {
border: 1px solid currentColor;
border-radius: 1.5em;
background: none;
outline: none;
transition-duration: .25s;
cursor: pointer;
margin: 30px;
padding: .5em 1em;
&:hover {
color: white;
background: black;
}
}
%btn--primary {
@extend %btn--base;
color: $color--primary;
font-size: 1.5em;
}
%btn--secondary {
@extend %btn--base;
color: $color--secondary;
font-size: 1.1em;
}
.hero__btn {
@extend %btn--primary;
margin: 2em;
}
.sidebar__btn {
@extend %btn--secondary
}
.global-nav__btn--login {
@extend %btn--secondary;
margin-right: 1em;
}
DRY CSS se resume folhas de estilos mais eficientes, escaláveis e unificadas
@Mixins
Os Mixins permitem que o Desenvolvedor para criar um único lugar onde os estilos principais podem ser definidos e referenciados.
Mixins pode até ter argumentos, permitindo a ligeiras alterações de uma chamada mixin para outro e permitindo diferentes tipos de o mesmo padrão a ser criado.
Mas cuidado!
Se os mixins forem utilizados demasiadamente, pode gerar um grande inchaço no CSS.
Mixins resolvem parte do problema e devem ser utilizados com cautela, pois muitas vezes deixam propriedades duplicadas na saída CSS.
@Mixins
@mixin button($color) {
background-color: $color;
border: 1px solid mix(black, $color, 25%);
border-radius: 5px;
padding: .25em .5em; &:hover {
cursor: pointer;
background-color: mix(black, $color, 15%);
border-color: mix(black, $color, 40%);
}
}
.button-badass {
@include button(#b4d455);
}
.button-badass {
background-color: #b4d455;
border: 1px solid #879f3f;
border-radius: 5px;
padding: .25em .5em;
}
Os preprocessors introduzem também outro conceito que pode ajudar a secar o nosso CSS: Extends.
Usado através da directiva %extend, estende-se permitir que um autor de estilo para dizer: "Eu quero selector A para ser denominado como selector B." O preprocessor então faz é separado por vírgulas selector A com selector B, permitindo-lhes compartilhar selector propriedades do B, e escrever as demais propriedades como normal.
Ao contrário de mixins, os extends não pode conter argumentos de customização.
%Extends
%Extends
.couch {
padding: 2em;
height: 37in;
width: 88in;
z-index: 40;
} .couch-leather {
@extend .couch;
background: saddlebrown;
}
.couch-fabric {
@extend .couch;
background: linen;
}
.couch, .couch-leather, .couch-fabric {
padding: 2em;
height: 37in;
width: 88in;
z-index: 40;
}
.couch-leather {
background: saddlebrown;
} .couch-fabric {
background: linen;
}
Esta metodologia não se aplica somente ao CSS, pois não é uma técnica e sim uma filosofia de código.
Quem ai nunca fez "caquinha"???
Uma série de posts sobre o desenvolvimento CSS em sites como GitHub, Groupon, e CodePen. Eles são interessantes para ler, e irá fornecer-lhe muitas dicas e idéias para a criação de suas próprias diretrizes de desenvolvimento de CSS.
.root {
width: 400px;
.links {
.link {
display: inline-block;
a {
padding: 10px 40px;
&:hover {
background: blue;
}
.icon {
margin-right: 5px;
}
@include selector-modifier(-2 ':hover', 1 suffix '.en') {
color: yellow;
...
Tome cuidado com
o excesso de agrupamento
.block {
&--modifier {
}
&__element {
&--modifier {
}
}
}
Agrupe de forma
mais eficiente o seu código
.block {} .block--modifier {} .block__element {} .block__element--modifier {}
Aprenda utilizar de forma eficiente
o EXTENDS nos Preprocessors
%button--red {
background: #ff3a6a;
}
.button {
&.-red {
@extend %button--red;
}
}
.button--delete {
@extend %button;
@extend %button--red;
}
Aprenda utilizar de forma eficiente
o MIXINS nos Preprocessors
.border-radius (@radius) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
#header {
.border-radius(4px);
}
PostCSS
CSS 4
CSS.next
PostProcessors
Generators (Yeoman)
Optimizations
CSSOM
Automation
Performance
https://goo.gl/Bf1Wk6
http://sixrevisions.com/css/css-development-at-large-sites/
http://sixrevisions.com/css/css-methodologies/
http://tableless.com.br/oocss-smacss-bem-dry-css-afinal-como-escrever-css/
https://github.com/robinrendle/atomic-framework
http://www.smashingmagazine.com/2013/08/other-interface-atomic-design-sass/
http://www.webstock.org.nz/talks/css-tools-massive-websites/
http://www.webstock.org.nz/talks/
http://thesassway.com/advanced/modular-css-naming-conventions
https://www.npmjs.com/package/generator-atomic-sass
https://subvisual.co/blog/posts/32-our-css-sass-project-architecture-and-styleguide
http://vanseodesign.com/css/dry-principles/
http://alistapart.com/article/dry-ing-out-your-sass-mixins
http://tatiyants.com/getting-dry-with-sass/
http://www.sitepoint.com/look-different-sass-architectures/
http://www.sitepoint.com/architecture-sass-project/
https://viget.com/extend/organizing-nested-selectors-in-sass
http://thesassway.com/advanced/modular-css-naming-conventions
https://css-tricks.com/bem-101/
http://www.sitepoint.com/beware-selector-nesting-sass/
http://una.im/classy-css/
http://pt.slideshare.net/diegoeis/browser-render-tree/