
Sass (Syntactically Awesome Stylesheets) é um pré-prcessador de CSS, onde podemos definir variáveis ​​e reutilizá-las para um projeto inteiro. Você também pode gerar classes e reutilizar trechos de código com "mixins" ou "estender" suas classes com propriedades usadas anteriormente. Todos estes são análogos às funções em linguagens de programação, pois podemos aplicar os conceitos de programação orientada a objetos.

Sass consiste em duas sintaxes. A sintaxe original (.sass), chamado de sintaxe de indentação, usa uma sintaxe semelhante ao `Haml`. Ele usa indentação para bloco de código separados e caracteres de nova linha para separar regras. A sintaxe (.scss), usa bloco de formatação CSS, usando chaves para denotar blocos de código e ponto e vírgula após os valores das propriedades.

```scss
// SASS
$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

// SCSS
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}


```

Particularmente eu prefiro a sintaxe (.scss), por ser mais próximo da sintaxe CSS.

## Instalação

Para utilizar o SASS, você precisa ter o [Ruby](https://www.ruby-lang.org/pt/downloads/), instalado na máquina. O [site do SASS](http://sass-lang.com/install), mostra 2 formas de instalação do mesmo.

Praticamente sempre uso a forma, utilizando o terminal:

```bash
gem install sass
```

Para verificarmos se o mesmo está instalando, podemos conferir com o comando:

```bash
sass -v
```

## Utilização

Após a instalação, se tem várias formas para rodar o pré-processador. Você pode usar um software como o [Koala](http://koala-app.com/), usar um automatizador de tarefas como [Grunt](http://gruntjs.com/) ([grunt-sass](https://github.com/sindresorhus/grunt-sass)) ou [Gulp](http://gulpjs.com/) ([gulp-sass](https://github.com/dlmanning/gulp-sass)), ou o próprio terminal.

Como exemplo, podemos usar o terminal:

- **watch ** - flag para que sempre quando tenha alteração dos arquivos .scss que estão sendo observados, seja gerado o css
- **style.scss** - [caminho da pasta dos arquivos scss ou caminho + nome especifico do arquivo a ser observado]
- **style.css** - [caminho da pasta de destino ou caminho + nome especifico do arquivo a ser gerado]

```bash
// sass --watch source/
// sass --watch source/style.scss
// sass --watch source/:dist/
sass --watch style.scss:style.css
```

Um ponto importante ao se observar uma pasta, é com relação aos arquivos que serão gerados. Digamos que na pasta `source/`, temos 3 arquivos e queremos que apenas 2 sejam gerados. Resolvemos isso com o prefixo `_`(undescore).

```bash
// _variables.scss
// styleguide.scss
// style.scss
```

Nos arquivos que estão sendo observados, importamos o arquivo de variáveis.

```scss
// styleguide.scss
// style.scss
@import '_variables';
```

## Variáveis

Todas as variáveis devem ser definidas usando um prefixo `$`.

```scss
// SASS
$color-alpha: rgba(0,0,0,0.8)
$color-typography-primary: #ffffff
$font-size-large: 32px

.title
  background: $color-alpha
  color: $color-typography-primary
  font-size: $font-size-large
```

```scss
// SCSS
$color-alpha: rgba(0, 0, 0, 0.8);
$color-typography-primary: #ffffff;
$font-size-large: 32px;

.title {
  background: $color-alpha;
  color: $color-typography-primary;
  font-size: $font-size-large;
}
```

```css
/* CSS */
.title {
  background: rgba(0, 0, 0, 0.8);
  color: #ffffff;
  font-size: 32px;
}
```

## Seletores aninhados

Com o Sass, você pode aninhar os seus seletores CSS, evitando a repetição de escrita. Mas cuidado, não podemos exagerar nos níveis, senão a manutenção fica inviável.

```scss
// SCSS
// Não faça isso !!!!
ul {
  li {
    .link {
      .text {
        color: red;
      }
    }
  }
}
```

```css
// CSS
ul li .link .text {
  color: red;
}
```

Vamos para a boa prática e também utilizar o caractere `&`, que representa o seletor pai.

```scss
// SCSS
.link {
  color: blue;

  &:hover {
    color: yellow;
  }

  &:before {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #f00;
    content: '';
    display: inline-block;
    height: 0;
    width: 0;
  }
}

.widget {
  .link {
    background: #a1a1a1;
  }
}
```

```scss
// SASS
.link
  color: blue

  &:hover
    color: yellow

  &:before
    border-left: 10px solid transparent
    border-right: 10px solid transparent
    border-top: 10px solid #f00
    content: ""
    display: inline-block
    height: 0
    width: 0

.widget
  .link
    background: #a1a1a1
```

```css
/* CSS */
.link {
  color: blue;
}
.link:hover {
  color: yellow;
}
.link:before {
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #f00;
  content: '';
  display: inline-block;
  height: 0;
  width: 0;
}

.widget .link {
  background: #a1a1a1;
}
```

## Mixins

Os mixins permitem que você reutilize propriedades CSS e seletores. No SCSS, precisamos definir o `@mixin` e atribuir um nome. Depois, podemos acrescentar algumas propriedades, criar uma classe ou elemento e utilizar com `@include`. Na sintaxe original, é um pouco diferente e podemos comparar abaixo:

```scss
// SASS
=border-radius($radius)
  -webkit-border-radius: $radius
  -moz-border-radius:    $radius
  -ms-border-radius:     $radius
  border-radius:         $radius

.box
  +border-radius(10px)
```

```scss
// SCSS
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}

.box {
  @include border-radius(10px);
}
```

```css
/* CSS */
.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}
```

## Funções

Semelhante a um `mixin`, as funções permitem parâmetros, mas não retornam trechos de código e sim um valor.

```scss
// SCSS
$total-width: 100%;
$total-columns: 12;

@function x-gridsystem-width($columns) {
  @return ($total-width / $total-columns) * $columns;
}

.box {
  width: x-gridsystem-width(6);
}
```

```scss
// SASS
$total-width: 100%
$total-columns: 12

@function x-gridsystem-width($columns)
  @return ($total-width / $total-columns) * $columns

.box
  width: x-gridsystem-width(6)
```

```css
/* CSS */
.box {
  width: 50%;
}
```

## Extend

Com SASS você pode fazer com que um selector herde os estilos de outro, sem duplicar as propriedades CSS. Tenha em mente que se você tem muitas propriedades duplicadas, você poderá enfrentar problemas de desempenho. Este recurso permite que você herde qualquer estilo já utilizado em qualquer classe anterior.

Vamos dizer que eu quero usar as propriedades de ".message" em ".success" e ".error". Para atingir este objetivo é necessário criar ".success" , ".error" e acrescentar "@extend .message".

```scss
// SASS
.message
  border: 1px solid #ccc
  padding: 10px
  color: #333

.success
  @extend .message
  border-color: green

.error
  @extend .message
  border-color: red
```

```scss
// SCSS
.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}
```

```css
/* CSS */
.message,
.success,
.error {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}
```

## Placeholders

O placeholder é semelhante ao `@extend`, com a diferença que ele funciona como uma variável (Se não for utilizado, não aparece no CSS final).

```scss
// SASS
%message
  border: 1px solid #ccc
  padding: 10px
  color: #333

.success
  @extend %message
  border-color: green

.error
  @extend %message
  border-color: red
```

```scss
// SCSS
%message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend %message;
  border-color: green;
}

.error {
  @extend %message;
  border-color: red;
}
```

```css
/* CSS */
.success,
.error {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}
```

## Conclusão

O CSS é muito importante para um projeto web. E é muito importante ter um pré-processador para organizar, reutilizar código e facilitar muito na manutenção. O SASS oferece muitos recursos e não vejo desvantagens, sendo comparado ao se escrever com apenas em CSS puro. Temos outros pré-processadores no mercado, e veremos em outros artigos.


Começando com SASS


Acredito que em 2008, quando comecei na área web e começava a engatinhar no CSS, uma das principais dúvidas era como funcionava o float e o que acontecia com o elemento pai.

A propriedade float, tem como seu valor padrão o `none`, podendo também receber os valores `left` e `right`.

Assim que utilizamos `float: left` em um elemento, o mesmo será posicionado a esquerda e se o próximo for um elemento `inline`, o irá acompanhar.

## Como funciona com os elementos `block` e `inline`?

Nos elementos `block`, o comportamento é diferente dos elementos `inline`, como podemos ver abaixo:

{% codepen hemersonvianna OyKQJv 7928 result 257 %}

No exemplo, temos 4 elementos (2 `block` e 2 `inline`). Adicionando a propriedade nos primeiros elementos de cada tipo, o segundo elemento `block`, ignora o primeiro e fica atrás dele, não recohecendo a posição do seu antecessor. Aumentando a largura do segundo elemento, conseguimos vê-lo e um fato curioso é que o texto dentro do elemento, reconhece o primeiro elemento, mas porque a quantidade de caracteres é possível ser mostrada naquele espaço a mais do elemento. Então não se engane, ele não está do lado e sim, atrás.

Já o segundo elemento `inline`, se encontra ao lado do primeiro. Com a propriedade `float`, o primeiro elemento reconhece as suas propriedades de dimensão como um elemento `block`.

## Como um elemento se comporta, quando um elemento filho tem a propriedade?

Acima, vimos o comportamento básico dos elementos soltos no `body`. Abaixo, iremos ver como se comportam os elementos, cujo os filhos tem a propriedade `float`.

{% codepen hemersonvianna LGPOMg 7928 result 257 %}

Como o exemplo, conseguimos ver que basta um elemento filho não ter a propriedade `float`, para o elemento pai identificar e respeitar a altura do elemento que não tem o `float`. Com os elementos 6 e 7, o elemento pai perde a referência e se comporta, como se não tivesse conteúdo. Uma solução para esse comportamento, seria acrescentar as propriedades `display: inline-block` e `width: 100%` no elemento pai. Assim, ele ficaria como os demais. Costumo dizer, que o `display: inline-block`, salva vidas. :) Com isso, terás um elemento com os 2 valores: `inline` e `block`. Isso quer dizer, que será um elemento bloco, mas sem quebra de linha (só ficará em 100%, se tiver a propriedade `width: 100%`). Falaremos mais sobre a propriedade `display`, em outro artigo.

## Quando usar o valores left e right para a propriedade?

Como vimos nos exemplos acima, o `float`, quebra o fluxo natural do conteúdo. Na maiorida dos casos, não queremos que os próximos elementos sejam influenciados pelos `floats` na página. Para solucionar esse problema, temos a propriedade `clear`. Solução muito conhecida por causa do `clearfix`, que você já deve ter visto em algum projeto ou já tenha utilizado.

{% codepen hemersonvianna VeZXQE 7928 result 440 %}

Temos 4 exemplos, acima. O primeiro se trata de um uso simples, quando temos 2 elementos e queremos que um fique a direita e outro a esquerda. Se invertermos os valores da propriedade `float`, dos 2 elementos, não teria problema algum. O segundo elemento ficaria a esquerda e o segundo a direita, não necessitando de alguma alteração no html.

No segundo exemplo, podemos ver que dependendo dos valores da propriedade `float`, podemos fazer muitas variações com as posições dos elementos. No caso, a sequência no html é [1, 2, 3] e com o css ele fica [1, 3, 2]. Assim, podendo ajudar muito na hora de criar mais de um template, sem ter que modificar o html.

No terceiro, já conseguimos ver a utilização da propriedade 'clear'. Se o elemento 4, não tivesse a propriedade `float` ou `clear`, naturalemnte ele ficaria atrás do elemento 1. Acrescentando nele a propriedade `float`, com o valor `left`, ele ficaria ao lado do elemento 3 e com o valor `right`, ficaria entre os elementos 5 e 2. E para quebrar esses comportamentos, podemos acrescentar a propriedade `clear`, com o valor `both`, para quebrar qualquer valor do `float` ou sendo especifico com o valor do elemento anterior. Se o elemento 3, tem o `float: left`, seria necessário o `clear: left`, no elemento 4. Assim, agora ele se encontra na próxima linha, abaixo do elemento 2. Os elementos posteriores irão respeitar essa quebra de linha.

No último, só fica mais um exemplo da lógica da mistura dos elementos com as propriedades `float` e `clear`.

## Conclusão

Tendo em mente como funciona a propriedade `float` e seu comportamento no documento HTML, fica mais fácil planejar estruturas que na maioria das vezes, não terão impacto no HTML, facilitando a manutenção. E também é importante entender como outras propriedades podem auxiliar. Como foi mostrado nesse artigo, sobre as propriedades `display` e `clear`. Portanto, usem com sabedoria e evitará muitas dores de cabeça na questão de estrutura e comportamento no documento HTML.


CSS - Propriedade float


Desde 1996, temos que agradecer a Håkon Wium Lie e Gijsbert (Bert) Bos, pela recomendação da W3C sobre o CSS1. No ano anterior, juntos apresentaram a proposta do CSS para a W3C. Hoje, estamos colhendo os frutos dessa iniciativa.

A primeira recomendação da W3C, foi em 17 de Dezembro de 1996, com o CSS nível 1 e o mesmo foi revisado em 11 de abril de 2008. Em 07 de junho de 2011, saiu a recomendação do CSS nível 2, sendo editado em 17 de dezembro de 2014 (CSS 2.1). Também temos as recomendações: [Módulo de cor nível 3](http://www.w3.org/TR/css3-color/) em 07 de junho de 2011, [Seletores nível 3](http://www.w3.org/TR/selectors/) em 29 de setembro de 2011, [Media Queries](http://www.w3.org/TR/css3-mediaqueries/) em 19 de junho de 2012, e [Atributos de estilo](http://www.w3.org/TR/css-style-attr/) em 07 de novembro de 2013. Você pode dar uma olhada nos [Trabalho atuais](http://www.w3.org/Style/CSS/current-work) da W3C.

> Cascading Style Sheets (CSS) é uma linguagem de folhas de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML.
> <cite> -- CSS
>
> - [Wikipédia](https://pt.wikipedia.org/wiki/Cascading_Style_Sheets) > </cite>

## Tipos

Tipos de CSS não se refere a forma de escrever as declarações e sim o local onde ele é inserido. Se ele estiver junto ao código HTML, chamamos de CSS inline, no início da página HTML ele é incorporado e quando colocado em um arquivo externo, ele é CSS linkado.

### CSS Inline

O CSS Inline é aquele que é inserido junto ao código HTML, através do atributo style. Sua aplicação é bastante questionada já que o modelo fica bastante parecido com a antiga formatação via HTML.

```
<p style="color: #ffff00; font-size: 11px;">
```

### CSS Incorporado

CSS incorporado é aquele que é inserido no início do código HTML dentro da tag . o modelo incorporado é melhor que o inline, mas ainda apresenta deficiências, já que ele terá efeito apenas sobre a página e não poderá ser reaproveitado para outras páginas.

```
<style type="text/css">
p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FF0000;
}
</style>
```

### CSS Linkado

CSS linkado é o modelo recomendado, pois neste modelo todo o código CSS fica em um arquivo separado, podendo ser linkado a várias páginas do site. Este é o melhor modelo para promover o reaproveitamento do código.

```
<link href="estilo.css" rel="stylesheet" type="text/css" media="screen">
```

## Seletores

Seletores são os elementos que o CSS pode formatar. São eles: Tags do HTML, classes (class) e identificadores (ID´s)

### Tags

Qualquer tag do HTML poderá ser formatada em CSS, porém, algus recursos não provocarão efeito nenhum. Por exemplo: aplicar cor em uma tag .
Para formatar tags, basta colocar o nome da tag como seletor. Exemplo:

```
body {
	font-family: Verdana, Arial, Tahoma;
	font-size: 12px;
	background-color: #E3E3E3;
}
```

### Classes

Diferente das tags, as classes não são aplicadas automaticamente no HTML. Uma vez criada, uma classe deverá ser aplicada manualmente no HTML.
A função das classes é fazer formatações específicas onde as definições de tags não são atendidas.

```
.recuo {
	font-size: 10px;
	color: #ff0000;
}
```

### Identificadores

Os identificadores em CSS correspondem ao ID no HTML, ou seja, quando você criar um ID no HTML significa que ele poderá ser formatado no CSS.

```
#site {
	width: 500px;
	background-color: #ffffff;
}
```

## Pseudo-classes

Existem vários tipos de pseudo-classes. Podemos separá-las em dois grandes grupos:Estruturais e Dinâmicas. Existem outras pseudo-classes que não se encaixam nestes dois grupos principais, que controlam a interface do usuário, elementos de URLs e etc.

### Pseudo-classes Dinâmicas

As pseudo-classes dinâmicas controlam os estados dos elementos. Abaixo, vão alguns deles:

`:hover` – quando passamos o mouse em cima do elemento.

`:active` – quando ativamos o elemento. Por exemplo, quando clicamos em um link e não soltamos o botão do mouse. Nesse momento, estamos ativando a ação do elemento. Esse estado é ativado também quando navegamos pelos links pelo teclado utilizando o TAB. Este estado não há em todos os elementos.

`:visited` – quando o link é visitado.

`:focus` – quando um elemento recebe foco. Muito utilizado em campos de texto. Quando clicamos em cima um campo de texto para escrever, o elemento está ganhando foco.

### Pseudo-classes Estruturais

As pseudo-classes estruturais servem para selecionarmos um elemento da estrutura do código. Existem várias, por exemplo:

`:first-child` – seleciona o primeiro filho de um outro elemento. <br>
`:last-child` – seleciona o último filho de um elemento. <br>
`:root` – representa um elemento que é a raiz do documento. No HTML 4, é sempre a tag HTML. <br>
`:nth-child()` – permite que selecionemos qualquer elemento no meio de um grupo de elementos. Por exemplo, você pode selecionar linhas de uma tabela. Assim, podemos fazer uma tabela zebrada, sem a ajuda de javascript. Há variações dessa pseudo-classe para podermos pegar os elementos de baixo para cima (`:nth-last-child`) e assim por diante. Testei aqui e isso não funcionou no meu FF3 (mac). <br>
`:lang()` – seleciona elementos que tem o atributo lang com um valor específico. ( [exemplo](http://tableless.com.br/wp-content/uploads/2009/03/lang.html) )

### Pseudo-classes Estruturais - target

O seletor target do CSS3 nos permite aplicar uma formatação ao elemento que é alvo ativo de um link. ( [exemplo](http://www.uxdesign.blog.br/curso-html5-css3/target.html) )

```
div:target { z-index: 1000; }
```

### Pseudo-classes Estruturais - atributo

No CSS3 também é possível formatarmos elementos que possuam um atributo específico.

```
a[title] {color: red;}
a[href="index.html"] {color: red;}
img[alt*="web"] {border: 5px solid red;}
a[href$=".pdf"] {background: url(pdf.png)}
```

## Pseudo-elementos

Pseudo-elementos servem para adicionar efeitos a um seletor ou parte dele. A seguir, veremos dois pseudo-elementos do CSS3 muito úteis: :before e :after.

### :before

O pseudo-elemento :before do CSS3 serve para adicionar alguma formatação ou conteúdo antes de um elemento.

```
li:before {
   content: "Livro: ";
   color: #D35529;
}
```

### :after

Por sua vez, o pseudo-elemento :after do CSS3 serve para adicionar alguma formatação ou conteúdo após um elemento.

```
li:after {
   color: #D35529;
   font-weight: bold;
}
```

## Conclusão

O CSS tem evoluindo muito e cada vez mais coisas novas estão aparecendo, até a maneira de escrever com os pré-processadores (SASS, LESS e STYLUS). O importante é sempre estar por dentro das boas práticas de utilização e manutenção, evita muitas dores de cabeça e deixa o projeto organizado. Cada projeto tem suas exigências e é importante fiar ligado nisso.


Começando com CSS


Olá, pessoal.

Vou escrever sobre uma coisa muito importante, que é o gerenciamento do código CSS. Você começa um projeto Front-End e está na hora de pensar como será a arquitetura CSS.

Se tem várias metodologias e frameworks no mercado. Com isso, várias fontes de estudo e conceitos mais sólidos para uma implantação.

Hora da avaliação dos pós e contras, e escolher o melhor rumo para o seu projeto. Nesse artigo, vou escrever sobre a metodologia que chamou a minha atenção e tenho adotado.

## No que tenho que pensar?

Quando vamos começar um projeto web, temos que montar uma boa arquitetura CSS, para que não tenhamos problemas futuramente. E é bom seguir a ideia de "perder" algumas horas de planejamento no início, do que perder dias para consertar e/ou mudar a metodologia adotada no meio do projeto.

O ponto essecial para uma arquitetura CSS é o mesmo ser modular (Escabilidade, reutilização e customização), principalmente para projetos complexos. O mesmo deve ser bem gerenciado, para não ter dor de cabeça com hierarquia e etc..

Levanta a mão que já pegou um projeto legado com vários "!important", sem nenhum critério. .../

**Portanto, temos que nos preocupar com muitos fatores na hora de escrever um código CSS. Como:**

- Escolha do pré-processador
- Padrão de escrita
- Estrutura de pastas
- Ser modular (escalável, reutilizável e customizável)
- Metodologias
- O melhor para a equipe/projeto

Com a metodologia ITCSS, uma boa porcentagem das preocupações serão resolvidas.

## ITCSS - Inverted triangle CSS

Na busca pela melhor forma de gerenciar o CSS dos meus projetos, conheci a metodologia [ITCSS](https://twitter.com/itcss_io), que foi criada por [Harry Roberts](https://twitter.com/csswizardry).

Aqui você confere o vídeo em que foi apresentado a metodologia [Harry Roberts - Managing CSS Projects with ITCSS](https://www.youtube.com/watch?v=1OKZOV-iLj4&hd=1)

Slides - [Managing CSS Projects with ITCSS](https://speakerdeck.com/dafed/managing-css-projects-with-itcss)

### A metodologia

A metodologia consiste em camadas e aborda a escrita por ordem de especificidade, onde as 2 primeiras (Settings e tools), são utilizadas no desenvolvimento composto por um pré-processador de CSS e as camadas generic, base, objects, components, theme(sendo optativa) e trumps.
Com isso:

- evitando a redundância de regras de estilo;
- problemas com especificidade, indo da mais baixa para a mais alta;
- código reutilizavel, com uma estrutura granular;
- elimina a necessidade de mais desenvolvimento de código para solucionar questões de substituição de propriedades.

![ITCSS](/assets/tecnologia/artigos/arquitetura-itcss.jpg)

**[Settings] Configurações:**

Utilizando um pré-processador de CSS, essa camada inicial tem todo o controle de variáveis ​​globais e configuração do projeto (cores, tamanhos de tela).

```
// Color palette
$color-brand:           #bada55;
$color-brand-highlight: lighten($color-brand, 15%);
$color-brand-shadow:     darken($color-brand, 15%);

// Links
$color-link:        $color-brand;
$color-link-hover:  $color-brand-shadow;
```

**Ferramentas [Tools]:**

Nessa camada usamos a grande utilidade de um pré-processado de CSS, que são as funções e mixins.

```
@mixin vertical-align {
  position: relative;
  top: 50%;
  @include transform(translateY(-50%));
}
```

**Genéricos [Generic]:**

Box-sizing, reset, modernizr se encontram nessa camada.

```
html {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

* {

    &,
    &:before,
    &:after {
        -webkit-box-sizing: inherit;
           -moz-box-sizing: inherit;
                box-sizing: inherit;
        }

}
```

**Base [Base]:**

Estilos que são aplicados nas tags HTML (estilização básica).

```
fieldset {
  background-color: lighten($base-border-color, 10%);
  border: $base-border;
  margin: 0 0 $small-spacing;
  padding: $base-spacing;
}

input,
label,
select {
  display: block;
  font-family: $base-font-family;
  font-size: $base-font-size;
}
```

**Objetos [Objects]:**

Seguindo o conceito de orientação a objeto CSS, nessa camada usamos as classes para os objetos que se repetem no projeto. A partir dessa camada que começamos a utilizar as classes CSS.

```
.o-media {
    display: table;
    width: 100%;
}

.o-layout {
    margin:  0;
    padding: 0;
    list-style: none;
    margin-left: -$base-spacing-unit;
}
```

**Componentes [Components]:**

Elementos de interface com contexto específico

```
.c-avatar {
    display: block;
    border-radius: 100%;
    width:  64px;
    height: 64px;
}

.c-avatar--small {
    width:  32px;
    height: 32px;
}

.c-btn {
    display: inline-block;
    padding: (0.5 * $base-spacing-unit) $base-spacing-unit;
    text-decoration: none;
    background-color: $color-btn;
    color: #fff;
    border-radius: $base-radius;
    transition: background-color 0.2s;

    &:hover,
    &:focus {
        background-color: $color-btn-hover;
        color: #fff;
    }

}
```

**Tema (opcional) [Theme]:**

Como está bem sugestivo, seria a camada onde teremos os temas do projeto / componentes / objetos.

```
/**
 * Background colors.
 */
@each $color in $colors {

    $color-name:  nth($color, 1);
    $color-value: nth($color, 2);

    .bg--#{$color-name} {
        background-color: #{$color-value};
    }

}
```

**Trunfos [Trumps]:**

Especificidade mais alta, ajudantes e substituições (.col-ms-12 {})

```
.clearfix,
%clearfix {

    &:after {
        content: "";
        display: table;
        clear: both;
    }

}
```

### Guidelines

O [CSS Guidelines](http://cssguidelin.es/) é uma documentação de recomendações e abordagens feita por Harry Roberts, para ajudar no desenvolvimento de um código CSS, legível, escalável, de fácil manutenção e etc..

### Framework

O [Inuitcss](https://github.com/inuitcss) é desenvolvido utilizando o pré-processador [Sass](http://sass-lang.com/), com a convenção de nomenclatura [BEM](https://en.bem.info/method/) e a metodologia [OOCSS](https://github.com/stubbornella/oocss/wiki) que não impõe o design. Projetado com o pensamento em escalabilidade e desempenho.

**Obs:** A única camada com a qual o Inuitcss não se envolve é a de componentes.

## Conclusão

Tenho adotado essa metodologia nos meus projetos, e tenho achado bem satisfatório a organização e o padrão que o mesmo traz.

O InuitCSS, utiliza da metodologia do [BEM](https://en.bem.info/method/). Acho muito confuso, misturar undercore com hífen. Por isso, utilizo assim:

```
.form {} // bloco
.form-field {} // elemento
.form-field--select {} // modificador
```

Para blocos com nome composto, ainda estou refletindo sobre o assunto, mas no momento utilizo tudo em minúsculo. Aceito feedbacks sobre o assunto.

```
.singleform {}
```

Quanto a estrutura de pastas, tenho usado numeração nas mesmas para uma melhor visualização.

- 00-settings
- 01-tools
- 03-base
- etc..

E com o acréscimo da pasta:

- vendor - para CSS externos de plugins (ex: colorbox, bxslider)

Acredito que não tem uma metodologia com a verdade absoluta e que o melhor caminho é ver o que o projeto necessita. Como pode ser visto neste artigo, a ideia era falar de uma metodologia, mas você pode ver que outras foram citadas e ideias acrescentadas. O mais importante é a unificação de pensamento da equipe para o projeto evoluir com um padrão sólido.

## Referências

- [Modular-CSS](https://github.com/bernarddeluna/Modular-CSS)
- [CSS Modular – Breve explicação](http://tableless.com.br/css-modular-breve-explicacao/)
- [CSS escalável - Parte 1](https://medium.com/@shankarcabus/css-escalavel-parte-1-41e7e863799e)
- [Classes Funcionais](http://tableless.com.br/classes-funcionais/)
- [Arquitetura CSS](http://tableless.com.br/arquitetura-css-anotacoes-da-palestra-rafael-rinaldi/)
- [InuitCSS](https://github.com/inuitcss)
- [css-scaffold](https://github.com/csshugs/css-scaffold)
- [itcss-netmag](https://github.com/itcss/itcss-netmag)
- [TemplateITCss](https://github.com/lionelthonon/TemplateITCss)
- [BEM](https://en.bem.info/method/)


UI2CodeGo to Home Page

Css

Compartilhar

Compartilhar

Compartilhar

Compartilhar