Documentação para Web Designers

Crie seus próprios layouts na Nuvem Shop

Selectores ID

Como o nome já diz, os IDs servem para associar elementos únicos em um documento HTML que podem ser manipulados, por exemplo, com JavaScript. Por ser um elemento único, é mais rápido para browser encontrar e  manipular tags com esse atributo.

Não utilize IDs para estilizar um elemento. Ao fazer isso, estaríamos cometendo o erro de associar um mesmo atributo HTML a "como se vê" de "como funciona". Lembre-se que o melhor uso dos IDs é associá-los ao comportamento (e não ao estilo).

Além do mais, fazendo isso o HTML ficará mais fácil de manter e também estaremos seguros que, ao remover um ID, provavelmente este estará ligado a algo funcional e não a um estilo, assim como fazemos com os JS Hooks.

Outra razão pela qual não queremos mais usar IDs para estilo nos templates da Nuvem Shop, é que eles têm um nível de especificidade desnecessário para o CSS. Então, caso haja necessidade de modificar visualmente um componente estilizado com um ID estaríamos obrigados a sempre declará-lo, assim como o seu escopo e variações.

Por exemplo, seria muito difícil pensar o seguinte CSS para um componente reutilizável que precisa de algumas modificações específicas para alguns breakpoints:

#main-container #title{
...some properties
}

Então reafirmando, sempre use IDs para associar comportamento e sempre que tiver que estilizar, utilize uma classe pensando em componentes e também que essas classes possam ser reutilizáveis em outros lugares.