tiago@artesites.com.br

http://www.artesites.com.br

"Reflow é o resultado de um evento que desencadeia mudanças no jeito que a pagina deve ser renderizada, tomando um tempo para o cálculo e reposicionamento de elementos em uma página."

O reflow acontece quando algumas alterações são geralmente desencadeadas:

• Manipulação do DOM (adição de elemento, exclusão, alteração ou alterar na ordem dos elementos)
• Alterações de conteúdos, incluindo alterações de texto em campos do formulário
• Cálculos e/ou alterações de propriedades CSS
• Adição ou remoção de folhas de estilo
• Alteração no atributo class
• Manipulação na janela do navegador (redimensionamento, rolagem etc)
• Ativação de pseudo-classe (:hover)

Saiba mais em: http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/

Para alguns o CSS não é importante por não conter uma codificação lógica, apesar de sua escrita ser simples, há uma série de armadilhas.  Uma estrutura CSS desorganizada está ligada a inúmeros conflitos e até no surgimento de bugs. Conflitos de CSS são frutos de um código mal escrito que sobrescreve ou cancela regras especificas aplicadas em um layout ou componente.

Hoje em dia quando o assunto é CSS muito se fala em padrões web (informações controladas pelo HTML, formatação pelo CSS e comportamento controlado por JavaScript), mas porque nunca ouvimos falar de ARQUITETURA CSS?

E isto é o que mais fazemos quando escrevemos CSS. Uma arquitetura CSS bem executada envolve planejamento, reutilização, padronização e outras séries de metodologias, disciplinas a serem desenvolvidas e aplicadas.

Não é muito expressivo;

Ordem de definição de dependências;

Especificidade, particularidades;

Cheio de truques;

Document Standards diferentes (devices e browsers).

Falta de conhecimento sobre o projeto;

Falta de conhecimento em CSS;
Caos na estrutura;
Documentação inexistente ou muito ruim;
Não analisar o que já existe antes de criar algo do zero (qual é o limite do seu código. Proporção? Performance?);
Falta de padrões na codificação.

/// Skin - Visual  ///

.button-small {
  padding: 10px;
}

.button-large {
  padding: 30px;
}

.button-rounded {
  border-radius: 10px;
}

O SMACSS nada mais é que um guia para escrever um bom código em CSS. É uma tentativa de documentar uma abordagem consistente para o desenvolvimento de sites (pequenos, médios ou grandes) ao utilizar CSS. Possui uma documentação bem completa e até um livro oficial. (https://smacss.com/book/)

CSS é fácil, mas desenvolver projetos escaláveis é difícil!

Foi criado por John Snook para resolver problemas de arquitetura do app de e-mail do Yahoo, virou referência em arquitetura CSS .(https://smacss.com).

Seu sistema é baseado em cinco categorias: base, layout, module, state e theme.

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */

/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Correct the line height in all browsers.
 * 3. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */

/* Document
   ========================================================================== */

html {
  font-family: sans-serif; /* 1 */
  line-height: 1.15; /* 2 */
  -ms-text-size-adjust: 100%; /* 3 */
  -webkit-text-size-adjust: 100%; /* 3 */
}

#header {
  @include clearfix();
  background: #fff;
  border-bottom: 1px solid #ccc;
  .logo {
    float: left;
    padding: 10px 20px;
  }
}

#sidebar {
  @include clearfix();
}

#footer {
  @include clearfix();
  background: #999;
  border-top: 1px solid #ccc;
  .map-links {
    padding: 10px 20px;
    color: #f0f0f0;
  }
}

.btn{
    display: inline-block;
    background: blue;
    position: relative;
    border-radius: 5px;
}
.input, .btn:after{
    color: #fff;
}
.btn:after{
    position: absolute;
    content: '@';
    right: 0;
    width: 1.3em;
    height: 1em;
}
.input{
    background: transparent;
    color: #fff;
    border: 0;
    padding-right: 20px;
    cursor: pointer;
    position: relative;
    padding: 5px 20px 5px 5px;
    z-index: 1;
}

.is-active { … }
.is-selected { … }
.is-visible { … }
.is-hidden { … }
.is-collapsed { … }

// in module-name.scss
.mod {
    border: 1px solid gray;
}

// in theme.scss
.mod {
    border-color: red;
}

scss
  application.scss    -> importa todos arquivos _index.scss para todas as pastas
  base
    _base.scss        -> estilização para todos os seletores base (ex: h1, h2, body, *, ...)
    _index.scss       -> importa todos os outros arquivos dentro da pasta base
    _normalize.scss   -> reseta os estilos
  layout
    _container.scss   -> 
    _extends.scss     -> 
    _index.scss       -> importa todos os outros arquivos dentro da pasta layout
    _panel.scss       -> 
  modules
    _buttons.scss     -> 
    _extends.scss     -> 
    _forms.scss       -> 
    _headlines.scss   -> 
    _icons.scss       -> 
    _img.scss         -> 
    _index.scss       -> importa todos os outros arquivos dentro da pasta modules
    _nav.scss         -> 
    _navbar.scss      -> 
  states
    _index.scss       -> importa todos os outros arquivos dentro da pasta states
  theme
    _index.scss       -> importa todos os outros arquivos dentro da pasta theme
    _halloween.scss
    _christmas.scss   -> 
  utilities
    _config.scss      -> arquivo de configuração
    _functions.scss   -> 
    _helpers.scss     -> helpers
    _index.scss       -> importa todos os outros arquivos dentro da pasta utilities
    _mixins.scss      -> mixins

application.scss

  @import utilities
  @import base
  @import layout
  @import module
  @import state
  @import theme

// Block & Element //
.block__btn {
  background: #FFF;
  padding: 1rem 0;
  text-transform: uppercase;

  // Modifier //
  &--default {
    background: #ccc;
    color: #000;
  }
  &--positive {
    background: #4CAF50;
    color: #FFF;
  }
  &--negative {
    background: #FF0000;
    color: #FFF;
  }
}

O B.E.M foi desenvolvido para auxiliar na criação de classes em CSS de fácil compreensão, semânticas e não tão extensas como a maioria imagina.