Os desenvolvedores da Web (ou seja, você) podem criar classes CSS e nomes de ID e usar esses nomes para identificar Divs e outros elementos e tags da página. Para os desenvolvedores, ao nomear seletores css que redefinem tags XHTML (tags), eles devem garantir que correspondam com precisão às tags predefinidas, mas quanto aos nomes dos seletores de classe e id, é uma questão de opinião. No entanto, não é um bom hábito nomear essas classes e IDs como desejar.
Depois de ler uma série de artigos sobre classes CSS e convenções de nomenclatura de id escritos por Andy Clarke (de Stuff and Nonsense e All That Malarkey) e Eric Meyer, comecei a pensar sobre o uso de classes e ids em meu próprio processo de design de sites. Método de nomenclatura.
Nomenclatura intuitiva
Ao projetar uma página web e precisar identificar um Div, a ideia mais natural é nomear o elemento usando palavras que descrevam sua localização na página. Essa abordagem faz com que os nomes de classe e ID fiquem assim:
painel superior
navegação horizontal
lado esquerdo
coluna central
coluna direita
Estas são formas válidas de nomear classes e ids CSS e XHTML. Esses termos são simples e descritivos, atendendo assim à necessidade de identificar os elementos da página e seus estilos CSS correspondentes.
O problema é que tal nome está associado a uma expressão específica do conteúdo da página. Esses nomes referem-se à posição dos elementos da página dentro de um layout de página específico, portanto, seu uso fora desse layout seria inadequado ou até mesmo confuso. Ao mesmo tempo, esses nomes não envolvem a estrutura do conteúdo do documento. Portanto, aqui está uma maneira melhor de nomear classes e IDs CSS.
Nomenclatura estruturada
A marcação estruturada significa a separação completa das informações de expressão/localização do conteúdo - isso inclui nomes de classe e ID que aparecem na marcação.
As informações relacionadas marcadas são usadas para descrever a estrutura do documento, e não sua aparência. Este recurso nos permite reutilizar conteúdo e marcação em diferentes formatos de aparência, simplesmente alterando o CSS. Quando você entende esse método, é fácil descobrir que usar a posição da página para nomear classes e ids é muito inapropriado ao lidar com formatos de aparência, como áudio. Portanto, classes e ids devem ser estruturados e nomeados com base na sua finalidade no documento e não onde aparecem.
Classes e nomes de id podem ser nomeados de forma estruturada conforme mostrado abaixo:
marca
navegação principal
subnavegação
conteúdo principal
barra lateral
Esses nomes são tão fáceis de entender quanto as convenções de nomenclatura intuitivas, mas descrevem a função do elemento da página e não sua localização. Isso torna o código mais consistente com a intenção original de usar marcação estrutural pura, ou seja, os desenvolvedores podem lidar com formatos de exibição em diversas mídias sem alterar a marcação.
Mesmo que você não planeje formatar suas páginas da Web em outras mídias, o uso de nomenclatura estruturada pode ajudá-lo a facilitar futuras atualizações ou reformulações do site. Por exemplo, a nomenclatura estruturada evita confusão quando um div com o mesmo ID da coluna direita é movido para o lado esquerdo da página. Nomear a barra lateral div desta forma é mais apropriado porque não importa em que lado da página ela apareça, o nome ainda é intuitivo e fácil de entender para os desenvolvedores.
algumas convenções de nomenclatura
Andy Clarke analisou o código-fonte de 40 sites projetados por desenvolvedores que defendiam conceitos padronizados de design da Web. Embora os nomes de classe e ID sejam muito inconsistentes, alguns nomes comuns que aparecem com frequência ainda são encontrados. Uma lista de exemplo dos nomes de classe/id mais comumente usados é fornecida aqui:
cabeçalho
contente
navegação
barra lateral
rodapé
Esses nomes comuns de classe e ID marcam o nascimento de um padrão ou a formação de uma convenção geralmente aceita? Embora seja isso que eu espero, acho que não. Eu realmente gostaria de ver um conjunto de padrões de nomenclatura para elementos de página comuns que vemos todos os dias. Ao mesmo tempo, o uso de um método de nomenclatura padronizado pode facilitar a localização de elementos de página e a atualização do site, especialmente quando você precisa alternar o trabalho entre sites desenvolvidos por diferentes desenvolvedores em momentos diferentes.