Organic CSS é um framework baseado em SASS que organiza o código CSS usando os conceitos de átomos e organismos, seguindo uma hierarquia semelhante aos níveis biológicos da matéria. Ele define átomos como propriedades CSS simples, moléculas como elementos DOM com estilo mas sem filhos, e organismos como componentes contendo moléculas e átomos. O framework facilita a organização e entendimento do código CSS ao associá-lo a estruturas biológicas familiares.

1. organic
CSS

2. o que é?
Um framework baseaso em SASS que "trata" o
seu código utilizando o conceito de organismos
e átomos.

3. mas... porque?
"Os atomos são os blocos de construção básicos da matéria."
Teremos um nível hierarquico e uma organização muito próxima
dos conceitos científicos na construção
de uma matéria. No nosso caso, na construção
de uma folha de estilo.

4. ... e também ...
Pensar no código associando sua estrutura com algo
que já conhecemos faz com que nosso esforço cognitivo
para organizar e entender seja bem menor. Além de ser
mais legal.

5. como funciona?
Estrutura básica do framework

6. átomo
Uma simples propriedade com valor.
@include define-atom("block") {
display: block;
}
@include define-atom("font-family") {
font-family: Georgia;
}

7. molécula
Molécula é um elemento DOM que precisa de estilo
e não tem elementos filho ligados a ele.
@mixin header {
@include atoms((
block,
clearfix,
font-family
));
}

8. organela
Uma organela necessariamente é um componente que contém
moléculas e atomos.
Nenhum estilo deve ser aplicado diretamente a ele.
.header {
@include header;
@include header-title;
@include header-column;
@include header-column-link;
@include header-title-small-text;
}

9. como organizar?
Existem casos onde um elemento necessita de átomos mas não é
uma molécula pelo fato de conter organelas.
Nesse caso...

10. foca no css

11. E o resto?
Basta seguir a hierarquia: celula
→ tecido → órgão → Sistema
→ organismo.
Organic CSS funciona bem com
SMACSS e Atomic Design!
É uma questão de escolha a
forma que você vai abstrair o
seu código.

12. Organic CSS já contém um
repositório com átomos e
moléculas pré-definidos.
github.com/krasimir/organic-css

13. take it sleazy…
and i'm out!