[CSS] Boas práticas para nomear suas variáveis

[dielduarte]

A ideia seria um post explicando como você costuma organizar suas variáveis. Por exemplo : variáveis de cor, você nomeia com o nome da cor ou com o status que ela representa ? Você separa seus arquivos de variáveis ? como costuma organizar ? Enfim.. da pra tirar umas dicas bacanas desse assunto buscando uma melhor organização.

[felipefialho]

Maneiro!

[hugooliveirad]

Nesse guia tem algumas referências de como nomear e utilizar variáveis: https://github.com/mktvirtual/guides/tree/master/estilo/CSS

Boa pauta!

[willianjusten]

Existe um post no 24ways, http://24ways.org/2014/naming-things/ que é bastante legal e eu já vinha pensando em escrever algo baseado nesse post e em outras coisas minhas, vou pegar esse assunto o mais rápido possível.

[fdaciuk]

Boaaa!!

[kurybr]

Maneiro de mais o tema !

[williamroger]

Estava iniciando um novo projeto e passei quase 10 minutos pensando em que nome daria para variável com a primeira cor do site, foi quando vi que precisava de ajuda e corri pra cá! ;)

[bernardodiasc]

A ultima vez que preparei um esquema de tema pra um app que usa CSS in JS, ficou mais ou menos assim:

/**
 * Using named colors from http://chir.ag/projects/name-that-color/
 * Treat color hex values as constants and use theme colors with purpose
 */
const palette = {
  white: '#FFF',
  haiti: '#130E2E',
  fern: '#5CB85C',
  radicalRed: '#F63954',
  alto: '#D8D8D8',
  nobel: '#B3B3B3',
  tuna: '#34323B',
  scarpaFlow: '#5A5665',
  manatee: '#918CA0',
  athensGray: '#F0F1F4',
  athensGrayAlt: '#E6E6ED',
  mercury: '#E4E4E4',
  porcelain: '#E9EDEE',
  brickRed: '#D32F3B',
  wePeep: '#F7D9DC'
}

export default {
  baseBrighter: palette.white,
  baseDarker: palette.haiti,
  baseRed: palette.radicalRed,
  baseGreen: palette.fern,
  baseSilver: palette.alto,
  baseHighlight: palette.mercury,

  typoHeading: palette.tuna,
  typoSubheading: palette.radicalRed,
  typoParagraph: palette.scarpaFlow,
  typoHighlight: palette.haiti,

  formPlaceholder: palette.manatee,
  formText: palette.scarpaFlow,
  formBorder: palette.athensGrayAlt,
  formError: palette.brickRed,
  formErrorShadow: palette.wePeep,

  lineRed: palette.radicalRed,
  lineSilver1: palette.mercury,
  lineSilver2: palette.porcelain,
  lineSilver3: palette.athensGray,
  lineSilver4: palette.athensGrayAlt,

  iconRed: palette.radicalRed,
  iconBright: palette.white,
  iconDark: palette.tuna,

  logoGray: palette.nobel
}

O app é feito em React, o que me permitiu criar um componente chamado ColorPalette, que carrega todas as cores do tema e no Styleguidist mostra assim:

---

Note que há cores repetidas mas que possuem nomes diferentes. A ideia é ter uma base de constantes para os hex das cores e atribuir em variáveis com propósitos diferentes. Os propósitos vão da necessidade, exemplificando, há uma cor vermelha principal, essa cor é usada para tipografia vermelha e para linhas vermelhas. Se por algum motivo o tom de vermelho da tipografia alterar, posso fazer isso de modo seguro sabendo que as linhas e bordas não serão afetadas. Essas abstrações de propósitos não são generalizadas, mas estudadas de acordo com o material de design fornecido. O designer que criou o site pensou muito nos detalhes e o código reflete tais abstrações.

Vale mencionar, se não estiver ficado claro, que para manutenção, as vezes precisamos fazer um search&replace em batch, ou seja, procurar por muitas referencias de uma só vez e substituir os resultados por outra coisa. Mesmo casos bobos, como aconteceu no meu tema, havia um erro de digitação no nome de uma variável, foi fácil resolver. Se eu usar a mesma variável para todos os vermelhos do site, certas ações de manutenção podem ser extremamente difíceis (ou chatas e demoradas).

Note tambem que no CSS as cores de tipografia vão estar praticamente sempre na propriedade color, já cores de bordas vão estar praticamente sempre em border, e por aí vai, isso é uma boa referência também para fazer abstrações dos nomes das variáveis.