Classe atrelada ao estilo?

[ghost]

Tenho vários elementos que terão partes com estilos similares, qual é a forma mais correta de se escrever o CSS?

Agrupando os seletores:

.hero,
.contact {
    display: flex;
}

Usando uma classe separada:

.flex {
    display: flex;
}
.hero {
    ...
}
.contact {
    ...
}

Na primeira forma, agrupar todas as classes que irão ter a mesma propriedade.
Na segunda forma, criar uma classe atrelada ao estilo e aplicar no HTML.

Bom, vejo várias pessoas dizendo que isso é errado, mas também vejo muitas pessoas usando classes no HTML como: .no-margin, .no-padding, .text-center, mesmo sem usar Bootstrap.

Eai?

[barbier]

Eu não vejo problema em nomear classes de acordo com o papel delas no layout ou a funcionalidade delas, infelizmente não lembro onde li que são semânticas de nome diferentes.....
Acho que isso deve entrar em acordo com o time mesmo.

[k8adev]

Nada é escrito na pedra, a menos que cause um grande problema, não é errado escrever classes agrupadas.

Costumo usar classes agrupadas quando meus elementos não usam classes globais mas tem propriedades em comum com outras classes em X contexto. Um bom exemplo, uma página:

.page-element-1,
.page-element-2 {
   display: [...];
   font: [...];
   padding: [...];
   margin: [...];
   color: [...];
}

.page-element-1 {
   justify-content: center;
   [...]
}

.page-element-2 {
  justify-content: space-between;
  [...]
}

<div class="page-element-1"></div>
<div class="page-element-2"></div>

Isso poderia ser usado dessa forma também:

.page-element {
   display: [...];
   font: [...];
   padding: [...];
   margin: [...];
   color: [...];
}

.page-element-1 {
   justify-content: center;
   [...]
}

.page-element-2 {
  justify-content: space-between;
  [...]
}

<div class="page-element page-element-1"></div>
<div class="page-element page-element-2"></div>

Mas se a classe não é global, não acho que seja o melhor caminho.

Agora, se meu elemento precisa de propriedades de uma class global e ainda assim, é necessário complementar:

.section-group {
   display: [...];
   font: [...];
   padding: [...];
   margin: [...];
   color: [...];
}

.page-element-1 {
   justify-content: center;
   [...]
}

.page-element-2 {
  justify-content: space-between;
  [...]
}

<div class="section-group page-element-1"></div>
<div class="section-group page-element-2"></div>

Sem crise.

Como eu disse, nada é escrito na pedra mas é preciso uma analise antes de sair escrevendo para evitar coisas como:

<div class="class-1 class-2 class-3 class-4 class-5 class-6 class-7"></div>

ou

rs rs rs

[felipefialho]

Da uma olhada na issue #70

Basicamente, contra o senso comum, agrupar classes causa mais problemas de performance do que não agrupar (além de manter o código mais chato para dar manutenção).

Não agrupo mais, deixo o papel de agrupar (quando necessário) para alguma solução de otimização do CSS. Mas o código em que trabalho fica intacto e sem dependência entre as classes.

[ghost]

Obrigado pessoal.