Organic CSS

organic

CSS

o que é?Um framework baseaso em SASS que "trata" o

seu código utilizando o conceito de organismos

e átomos.

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.

... 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.

como funciona?Estrutura básica do framework

átomoUma simples propriedade com valor.

@include define-atom("block") {

display: block;

}

@include define-atom("font-family") {

font-family: Georgia;

}

moléculaMolé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

));

}

organelaUma 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;

}

como organizar?Existem casos onde um elemento necessita de átomos mas não é

uma molécula pelo fato de conter organelas.

Nesse caso...

foca no css

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.

Organic CSS já contém um

repositório com átomos e

moléculas pré-definidos.

github.com/krasimir/organic-css

take it sleazy…

and i'm out!