8 práticas recomendadas para nomear classes e IDs CSS em um projeto JavaScript

As convenções de nomenclatura para classes e IDs CSS têm um papel significativo na compreensão e manutenção do código em um projeto JavaScript. Os nomes usados ​​podem aumentar a clareza, reutilização e flexibilidade da base de código. Seguir as práticas recomendadas é importante ao nomear classes e IDs CSS em um projeto JavaScript.

1. Usar nomes semânticos

Escolher nomes que expliquem precisamente a função ou propósito do elemento é crucial. Os nomes semânticos fornecem um contexto significativo e facilitam a compreensão do código.

Por exemplo, em vez de usar nomes tradicionais como caixa ou suporte, tente usar nomes como cabeçalho ou Barra Lateral que refletem a função específica do componente.

/* Exemplo de nomes semânticos */
.cabeçalho {}
.Barra Lateral {}

2. Use convenções de nomenclatura consistentes

A consistência é fundamental ao nomear classes e IDs CSS. Usar o mesmo padrão de nomenclatura em toda a linha simplifica a manutenção da estrutura da base de código.

As convenções de nomenclatura BEM (Block Element Modifier) ​​e OOCSS (Object-Oriented CSS) são as convenções de nomenclatura mais preferidas.

Você pode usar a convenção de nomenclatura OOCSS para escrever código CSS que seja modular, gerenciável e escalável. Aqui está uma ilustração de como você pode criar um menu de navegação usando OOCSS:

/* Estrutura */
.nav {
mostrar: flex;
estilo de lista: nenhum;
}
.nav__item {
margem direita: 1rem;
}
.nav__link {
decoração de texto: nenhum;
cor: #333;
}
/* Aparência */
.nav__link:flutuar {
decoração de texto: sublinhado;
}

Você tem duas partes distintas do código para o menu de navegação neste exemplo, uma para a estrutura e outra para a aparência. A parte de aparência descreve as cores e outros estilos que dão uma aparência atraente, enquanto a seção de estrutura explica como e onde os itens do menu serão posicionados.

3. Evite Namespaces

Em CSS, namespaces são estruturas semânticas que permitem fornecer um prefixo de namespace para suas seleções. Para diferenciar entre módulos, bibliotecas ou outras partes da base de código que podem ter nomes de classes conflitantes, o prefixo de namespace é usado.

Esse recurso é útil, mas pode causar problemas de especificidade e manutenção.

Uma das maiores desvantagens dos namespaces é a dificuldade em lidar com a especificidade do seletor. Um prefixo de namespace pode tornar uma seleção mais específica, dificultando a substituição de estilos no futuro.

Isso leva ao inchaço do código CSS, que é confuso e difícil de manter ao longo do tempo.

Veja, por exemplo:

/* Com namespace */
.meu-módulo.contente {
cor de fundo: azul;
}
/* Sem namespace */
.module-header {
cor de fundo: vermelho;
}
.module-content {
cor de fundo: amarelo;
}

O prefixo do espaço de nomes .meu-módulo e .contente são ambos usados ​​no bloco principal de código. Como resultado, a seleção se torna mais precisa, tornando a substituição de estilo futura mais desafiadora.

Na segunda parte, o namespace é substituído por nomes de classe descritivos .module-header e .module-content. Além de tornar o código mais fácil de entender, isso também o torna mais simples de manter.

O uso de namespaces adiciona complexidade desnecessária ao seu programa, especialmente quando muitas pessoas estão trabalhando em diferentes partes do mesmo projeto. Você pode achar difícil entender e alterar o código um do outro, pois equipes diferentes podem usar prefixos de namespace diferentes.

Use nomes de classe que sejam descritivos, por exemplo:

.cabeçalho {
cor de fundo: vermelho;
}
.contente {
cor de fundo: amarelo;
}

Ao usar nomes de classe descritivos, você pode acabar com a necessidade de namespaces e pode manter sua base de código bem estruturada e fácil de entender.

4. Evite nomes globais

Em projetos JavaScript, evitar nomes globais para classes e IDs CSS é crítico. Nomes globais complicam a manutenção do código e aumentam a possibilidade de nomear riscos. Para garantir uma base de código mais duradoura e escalável, é bom usar nomes mais precisos no escopo de um componente ou módulo.

Considere o exemplo abaixo:

 Uso incorreto de nomes globais 
<divaula="recipiente">
<divaula="Barra Lateral">
 Conteúdo aqui 
div>
div>

Os nomes de classe genéricos Barra Lateral e recipiente no exemplo acima são suscetíveis a conflitos com outras folhas de estilo ou código JavaScript dentro do projeto. Por exemplo, se duas folhas de estilo especificam o mesmo .Barra Lateral classe, uma com fundo azul e outra com fundo vermelho, a cor da barra lateral dependerá do último carregamento da folha de estilo. Resultados inesperados e imprevisíveis podem ocorrer a partir disso.

É melhor usar nomes mais precisos dentro do componente ou módulo relevante para minimizar esses problemas.

Veja uma versão aprimorada.

 Melhorado com nomes específicos 
<divaula="cabeçalho__container">
<divaula="barra__conteúdo">
 Conteúdo aqui 
div>
div>

Na versão alterada, os nomes das classes header__container e sidebar__content deixe claro para que serve cada elemento e o que ele faz.

O uso de nomes específicos reduz o risco de conflitos de nomes e garante que os estilos afetem apenas os componentes antecipados dentro de seus respectivos componentes ou módulos.

5. Usar convenção de nomenclatura BEM

A convenção de nomenclatura BEM (Block Element Modifier) ​​é popular para nomear classes CSS e IDs em projetos JavaScript. O BEM fornece uma maneira estruturada e modular de nomear elementos, incentiva a reutilização e facilita a manutenção de bases de código.

As convenções BEM consistem em blocos, elementos e modificadores. Um elemento de alto nível ou um componente autônomo é chamado de bloco. Os elementos são as partes componentes de um bloco que dependem do contexto do bloco. Os modificadores podem alterar a aparência ou o comportamento de um bloco ou elemento.

Aqui está um exemplo usando a convenção de nomenclatura BEM:

/* Exemplo de convenção de nomenclatura BEM */
/* Bloquear */
.cabeçalho {} 
/* Elemento do bloco */
.header__logo {} 
.header__menu {}
/* Modificador do elemento */
.header__menu--ativo {} 

A ilustração acima mostra uma cabeçalho bloquear com um logotipo e um cardápio elemento. O cardápio item recebe o ativo mude para mostrar que se tornou ativo.

Você pode identificar rapidamente os componentes fundamentais e as conexões entre as várias partes, tornando a estrutura e a hierarquia da base de código mais claras.

6. Usar prefixos ou sufixos

Você pode adicionar configurações adicionais a classes CSS e nomes de ID prefixando ou postfixando-os, especialmente em projetos maiores. Você pode usar um prefixo como js- para indicar que uma classe ou ID oferece recursos de JavaScript. Convenções de nomenclatura do JavaScript juntamente com essas convenções de nomenclatura CSS, você pode economizar tempo e esforço a longo prazo.

 HTML com prefixo JavaScript 
<botãoaula="js-toggle">Alternarbotão>
<diveu ia="js-modal">Modaldiv>

7. Use nomes descritivos

Você pode compreender melhor o propósito, a função ou o conteúdo de um elemento por meio de nomes descritivos.

Considere o exemplo abaixo:

/* Nomes não descritivos */
.caixa azul {
/* Estilos aqui */
}
a {
/* Estilos aqui */
}

Os nomes das classes caixa azul e a no exemplo acima não transmitem nenhuma informação relevante sobre os componentes aos quais se referem. A ausência de nomenclatura descritiva pode dificultar a compreensão rápida dos propósitos ou funções de determinados componentes dentro do programa.

Use nomes descritivos que expliquem com precisão a função do elemento para melhorar a legibilidade e manutenção do código.

Considere o exemplo melhorado abaixo:

/* Nomes descritivos */
.cartão de produto {
/* Estilos aqui */
}
.navigation-link {
/* Estilos aqui */
}

Os nomes das classes cartão de produto e link de navegação na versão atualizada tornam óbvio o propósito de cada elemento. Você descobrirá que explorar e editar o código é mais simples com esses nomes descritivos.

O uso de nomes descritivos beneficia os atuais e potenciais desenvolvedores futuros que trabalham na base de código. Ao revisitar o código depois de algum tempo, você pode entender facilmente a estrutura e o funcionamento das peças.

8. Use nomes curtos e concisos

Embora nomes distintivos sejam essenciais, mantê-los concisos também é importante. Nomes longos de classe e ID podem tornar o código mais difícil de ler e manter. Tente encontrar um equilíbrio entre ser breve e ser detalhado. Além disso, considere o uso de siglas ou abreviações conhecidas no contexto do projeto.

Considere o caso em que você deseja usar CSS para personalizar um menu de navegação em seu site. Você pode usar nomes mais curtos e específicos, como item de navegação ou link de navegação em vez de longos como interface de navegação ou link de navegação principal.

.nav-item {
/* Estilos para itens do menu de navegação */
}
.nav-link {
/* Estilos para links de navegação */
}

Usar siglas ou abreviações populares no contexto do projeto, como navegação para navegação, pode tornar o código muito mais fácil para outros programadores entenderem.

Práticas recomendadas para nomear classes e IDs CSS

Em um projeto JavaScript, é crucial nomear apropriadamente classes e IDs CSS para legibilidade, manutenção e escalabilidade do código.

Você pode tornar as folhas de estilo mais simples e melhorar a qualidade do código. Reservar um tempo para definir boas convenções de nomenclatura compensará a longo prazo, tornando mais fácil para você e outras pessoas entender e manter a base de código.