Classes CSS para semântica vs. estilos em casos gerais

5

A especificação W3C no atributo class diz

There are no additional restrictions on the tokens authors can use in the class attribute, but authors are encouraged to use values that describe the nature of the content, rather than values that describe the desired presentation of the content.

Referência

Eu trabalho em um site enorme que tem muitas páginas diferentes. Temos uma folha de estilo padrão que é compartilhada em praticamente todas as páginas. Acho útil ter conjuntos de regras CSS como estes:

.center { text-align: center; }
.red { color: red; }

No entanto, essas classes não descrevem semanticamente o conteúdo.

Tenho certeza de que você pode entender que há um número enumerável de casos em que preciso centralizar o texto ou colori-lo em vermelho, e cada uma dessas instâncias específicas pode não ter nada a ver uma com a outra. Por exemplo, a classe warning pode ser útil em um ponto, mas em outro pode ser apenas aside . Eu não quero necessariamente que os todos avisos sejam vermelhos também.

Eu percebo que esta é uma questão hiper-técnica, mas eu quero a resposta hiper-técnica. Existe alguma maneira correta de reconciliar com regras de estilo gerais que não expressam semântica com a especificação HTML? Este é um caso para shudder estilos inline?

    
por Explosion Pills 01.02.2013 / 15:31
fonte

3 respostas

5

I work on a massive website that has many disparate pages. We have a default stylesheet that is shared across practically all pages. I find it useful to have CSS rulesets such as these:

.center { text-align: center; }
.red { color: red; }

Isso é comumente feito, mas na minha opinião é uma prática muito ruim. É apenas um pouquinho melhor do que apenas colocar todos os estilos em linha. A única vantagem que você obtém é que você pode escolher um tom diferente de vermelho. É tão antitético para a idéia de CSS que seria um candidato para o theedailywtf.com, se não fosse uma prática tão comum.

Em vez de

<div class="warning">Do not cross the streams!</div>

Você tem

<div class="warning red center">...</div>

e em outros lugares:

<span class="red">...</span>

<div class="center">Some heading or caption or whatever</div>
<div class="warning bold black">A different kind of warning?</div>

O que você vai fazer quando seu cliente quiser alterar todos os avisos para texto preto em uma caixa preenchida amarela com uma borda preta, flutuou certo? Uma tarefa que deve levar dez minutos, em vez disso, leva dez horas.

Claro, é mais trabalho agora para atribuir nomes de classes semânticas a todo o seu conteúdo, mas isso facilita muito o ajuste da aparência do site no futuro. Quanto maior o site, mais importante é fazer isso corretamente. Se você estiver familiarizado com aplicativos de processamento de texto, pense em ajustar os cabeçalhos de subseção em um livro de 50 capítulos em que nenhum estilo de parágrafo foi usado.

Se você quiser alguns "avisos" vermelhos e outros "avisos" não vermelhos, então você precisa de duas classes separadas, por exemplo, "aviso" e "aviso sério".

Eu recomendo Transcendendo CSS: As Belas Artes do Web Design por Andy Clarke, Molly E. Holzschlag, Aaron Gustafson e Mark Boulton. É um livro lindo e faz um ótimo trabalho explicando como e por que separar o conteúdo semântico da apresentação.

    
por 01.02.2013 / 17:58
fonte
1

Em primeiro lugar, esta é uma boa pergunta, eu não acho que isso é hyper técnico e faz muito sentido.

encouraged é uma palavra chave aqui.

O que você está fazendo é uma prática muito comum, é extremamente difícil fazer esse tipo de estilo sem essa técnica usando CSS. CSS está lá para descrever como queremos que o elemento se pareça, é a nossa linguagem de estilo e realmente só engancha efetivamente em ids, nomes de classes e nomes de tag (todos os outros seletores são consideravelmente mais lentos na última vez que verifiquei). Destas três classes faz mais sentido. Isso ocorre porque os IDs são exclusivos e os nomes das tags são ainda mais descritivos do que um elemento é e não como ele deve ser exibido.

Eu entendo o argumento do W3C, em programação na maioria das vezes as classes descrevem de que tipo e objeto é e como ele se comporta e não como deve ser apresentado.

  • Uma alternativa é usar uma linguagem de templates mais robusta, como SASS , e usar mixins (veja o exemplo na página inicial). Isso permitiria que você desse aulas descritivas e compartilhasse um mixin 'center'. Eu não gosto disso, já que envolve a incorporação de outra tecnologia ao seu código. MENOS também é uma alternativa.
  • Sim, você pode inline os estilos, você também pode fazer isso de forma programática (use classes e faça um script incorporar os estilos no back end). Eu realmente não vejo o benefício de fazer isso, exceto por aderir mais de perto à recomendação do W3C.
  • Você pode continuar fazendo o que está fazendo. Que funciona, mas não adere ao encorajamento do W3C.

Quando você inline styles, também terá os seguintes problemas:

  1. elementos com IDs terão seus valores de estilo substituídos pelo estilo in-line. Um seletor de ID tem precedência sobre um seletor de classe, mas o estilo inline bate ambos. Isto não é um problema se os seus estilos são todos os tipos de 'centro' mas vale a pena ter em mente. Você ficaria surpreso com a quantidade de código quebrado existente na Web que falha por esse motivo.
  2. Até mesmo o 'centro' de classes pode ter um significado diferente em alguns cenários, você pode querer também definir as propriedades adicionais e não apenas o alinhamento de texto e ainda ser o centro. Com o centro e vermelho não é um problema tão grande que

Aqui está o que eu acho que você deveria fazer:

Tente SASS ou LESS, se isso funcionar para você, eles podem acabar economizando muito tempo. Se isso não funcionar, eu continuaria usando as classes como uma forma do padrão mixin para compartilhar propriedades entre os elementos.

Concordo que o nome 'class' para algo que descreve como um objeto deve ser exibido e não como ele é realmente é confuso, hoje as classes duplicam tanto para a lógica de apresentação em CSS quanto para a lógica de código em JavaScript.

Boa sorte!

    
por 01.02.2013 / 15:52
fonte
1

O uso de nomes de classes mais semanais é útil se você estiver projetando mais de um estilo, por exemplo, uma versão móvel. Eles podem compartilhar muitos códigos, mas às vezes o 'centro' não deve mais ficar centrado na versão móvel. Ou algo é colocado em um fundo diferente e, portanto, deve usar marrom em vez de vermelho. Restyling coisas como 'center {text-align: right;}' é apenas confuso.

Então, eu incentivaria os significados semânticos e os estilizaria. Para evitar a codificação redundante de estilos que se mantêm recorrentes (por exemplo, 'font-weight: bold; text-align: center; color: red;' para vários avisos e outro texto em vermelho Sass ou Less pode ser muito útil.

No entanto, eu não gastaria muito tempo renomeando todas as suas turmas se você não tivesse vários estilos e o layout não estivesse sujeito a alterações. Afinal, é apenas para sua própria conveniência (e os desenvolvedores depois de você, se houver algum). Os navegadores não fazem nada com o valor semântico, se alguma coisa usar atributos de função.

Eu não usaria muito os estilos inline, mas eles podem ser úteis. Por exemplo, quando o estilo vem de uma ferramenta e é gerado. Simplesmente não é produtivo passar por cima de aros para reescrever o código gerado para classes apenas para estilizá-las. (Especialmente quando alterar as configurações da ferramenta permitirá uma mudança fácil.)

    
por 01.02.2013 / 16:36
fonte