Organizando e Modularizando

com Metodologias

de

CSS

https://goo.gl/Bf1Wk6

/ridjohansen
Richard Duchatsch Johansen

Front End Engineer @ WebRadar
Membro do GT de Acessibilidade @ W3C.br
Fundador/Curador @ FrontInterior
Fundador/Curador @ FEMUG-RJ

A EVOLUÇÃO DA WEB

http://www.evolutionoftheweb.com/?hl=pt-br

CSS
Cascading Style Sheets

CSS

CSS é notoriamente difícil de gerir, isto porque o atualmente o ele carece de um mecanismo de escopo

CSS

Por esta causa, tudo no CSS é global!

Isso significa que qualquer alteração feita tem o potencial de alterar o que é renderizado no navegador.

Preprocessors
Dando mais poder ao CSS

Preprocessors

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.

Preprocessors

Mas sozinhos os preprocessadores, não realmente resolver o problema de escalabilidade. 

Preprocessors

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.

CSSOM
CSS Object Model

CSSOM

Basicamente o CSSOM é uma representação da formatação do documento. Ele lista as instruções e regras de estilos dos elementos.

CSSOM

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.

CSSOM

!important      classes

 

 0 0 0 0

 

IDs       elementos

CSSOM

div.content p !important
1 0 1 2

#main div.content p
0 1 1 2

Metodologias
Dando mais organização ao CSS

Metodologias

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.

Metodologias

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:

  • Melhores práticas de CSS e HTML 
  • convenções de nomeação de Classes e IDs 
  • Ordenação e agrupamento de regras de estilo CSS
  • Formatação de código

Metodologias

Não existe "a melhor" metodologia CSS.

A melhor metodologia é aquela que se adapta para indivíduos / equipes / projetos.

Atomic Design

Chemistry Analogies in CSS

Atomic Design

#TumDumPah

Atomic Design

Atomic Design é uma metodologia de CSS criada por Brad Frost.

Atomic Design

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

Atomic Design

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

OOCSS
Object Oriented CSS

OOCSS

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

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>

OOCSS

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

OOCSS

Estrutura de arquivos seguindo a metodologia

OOCSS

BEM_
Block Element Modifier

BEM_

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

BEM_

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

BEM_

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.

BEM_

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

BEM_

Um MODIFIER é uma classe de CSS que altera a apresentação padrão de um bloco ou elemento.

BEM_

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

ITCSS
Inverted Triangle CSS

ITCSS

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

ITCSS

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:

  • Configurações (se usar pré-processador)
  • Ferramentas (se usar pré-processador)
  • Estilos genéricos
  • Estilização básica de elementos HTML
  • Objetos
  • Componentes
  • “Trumps” (!important)

ITCSS

O foco do ITCSS é melhorar a especificidade do CSS baseadas no CSSOM (CSS Object Model)

ITCSS

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)

Classy CSS OOBEMITSCSS
 

Praticamente um OOBEMITCSS

Classy CSS

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

Classy CSS

É 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
Don't Repeat Yourself

DRY CSS

DRY CSS se resume folhas de estilos mais eficientes, escaláveis e unificadas

DRY CSS

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

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

DRY CSS

%Extends

DRY CSS

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

}

=

DRY CSS

Esta metodologia não se aplica somente ao CSS, pois não é uma técnica e sim uma filosofia de código.

Mixins Libraries
Prefixos nunca mais!

Mixins Libraries

Mixins Libraries

Best Practices
 

 

Best Practices

Quem ai nunca fez "caquinha"???

Best Practices

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.

 

Groupon (http://mikeaparicio.com/2014/08/10/css-at-groupon/)

GitHub (http://markdotto.com/2014/07/23/githubs-css/)

CodePen (http://codepen.io/chriscoyier/blog/codepens-css)

Hootsuite (http://code.hootsuite.com/css-at-hootsuite/)

Lonely Planet (http://ianfeather.co.uk/css-at-lonely-planet/)

Buffer (http://blog.brianlovin.com/buffers-css/)

Trello (http://blog.trello.com/refining-the-way-we-structure-our-css-at-trello/)

Best Practices

.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

Best Practices

.block {
  
  &--modifier {
  
  }

  &__element {
    
    &--modifier {
      
    }
  }
}

Agrupe de forma

mais eficiente o seu código

.block {}
.block--modifier {}
.block__element {}
.block__element--modifier {}

=

Best Practices

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

Best Practices

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);
}

Tag Cloud
 

 

PostCSS

CSS 4

CSS.next

PostProcessors

Generators (Yeoman)

Optimizations

CSSOM

Automation

Performance

Obrigado!

 


(facebook | twitter | linkedin)
/ridjohansen

https://goo.gl/Bf1Wk6

Links

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/

https://vimeo.com/67476280

http://www.webstock.org.nz/talks/css-tools-massive-websites/

http://www.webstock.org.nz/talks/

http://patternlab.io

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

https://www.youtube.com/watch?v=1OKZOV-iLj4&hd=1

Links

http://pt.slideshare.net/jeremyclarke/dry-css-a-dontrepeatyourself-methodology-for-creating-efficient-unified-and-scalable-stylesheets

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://bitters.bourbon.io/

http://una.im/classy-css/
http://pt.slideshare.net/diegoeis/browser-render-tree/

Organizando e Modularizando com Metodologias de CSS

By Richard Duchatsch Johansen

Made with Slides.com

Organizando e Modularizando com Metodologias de CSS

  • 3,874

More from Richard Duchatsch Johansen