1

Dúvida CSS

#CSS
Rosemeire Deconti
Rosemeire Deconti

Na criação do arquivo CSS qual é a melhor ordem para incluir as classes e ids? Na ordem de criação dos elementos HTML? Em ordem alfabética? Em arquivos separados por página HTML?

6
73

Comentários (6)

1
Francisco Júnior

Francisco Júnior

05/03/2021 21:30

Olá Rose, tudo bem?

Existem várias práticas para tornar seu arquivo css agradável, porém, durante o desenvolvimento, é comum você ir criando seus estilos de acordo com a ordem semântica dos mesmos. Estando bem documentado, tem um excelente efeito em termos de manutenção de código.

Não há uma regra geral, mas parta da premissa que teus estilos CSS são componentes de um software, e desta feita, devem seguir um padrão coeso de codificação e organização.

Espero ter te ajudado de alguma forma.

Abraços.

0
⚡Eros Lima

⚡Eros Lima

05/03/2021 20:26

Rosemeire assim que li o título pensei no Bootstrap e que quando conhecer mais ferramentas isso talvez possa lhe causar probelmas, por isso também pesquisei por curiosidade:


https://pt.stackoverflow.com/questions/253484/%C3%89-uma-m%C3%A1-pr%C3%A1tica-colocar-n%C3%BAmeros-como-id-em-elementos-html-se-sim-por-qu%C3%AA



Comentário:


"Um número é um caractere alfanumérico. Eu concordo que usar apenas números é má prática, mas não vai contra o que a W3C estabelece.

Realmente "não há nenhum problema técnico", mas como você perguntou sobre "má prática", sim existe um problema.

Veja que na seção 3.2, os elementos do HTML5, sobre o atributo ID, é dito:

The id attribute specifies its element's unique identifier (ID). The value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.

Que em tradução livre seria:

O atributo id especifica o identificador exclusivo (ID) do elemento. O valor deve ser exclusivo entre todas as ID na subárvore de origem do elemento e deve conter pelo menos um caractere. O valor não deve conter nenhum caractere de espaço.

Com isso é estabelecido as normas para uso do ID:

  • Não deve conter nenhum caractere de espaço;
  • Deve ser único;
  • Deve conter pelo menos um caractere;

E de brinde deveriam ser mnemônicos, fáceis de lembrar. Eu também sou incapaz de me organizar apenas com números, prefiro identificadores textuais.

Muito dificilmente eu conseguiria lembrar, a posição de uma tabela somente com números, por exemplo <div id='12'></div> para representar a linha 1 e coluna 2. Seria muito mais simples <div id='l1c2'></div> e/ou derivações semelhantes.

O identificador exclusivo de um elemento pode ser usado para vários propósitos, principalmente como uma maneira de vincular a partes específicas de um documento usando identificadores de fragmentos, como uma forma de segmentar um elemento quando está usando scripts e como forma de modelar um elemento específico de CSS."
0
Rosemeire Deconti

Rosemeire Deconti

05/03/2021 19:24

Pedro Santos! Muito agradecida pelas dicas! Valeu!

1
Pedro Santos

Pedro Santos

05/03/2021 19:22

Eu costumo seguir a semântica da página HTML. Se o projeto for rebuscado, com necessidade de regras complexas para cada classe, eu separo o css em arquivos, um para cada área funcional da página.

Já com relação à ordem específica das classes e ids no corpo de um arquivo css, tento seguir a semântica da página (no caso, a ordem de criação dos elementos HTML, levantada por você); porém, às vezes com hovers e pseudo-elementos e hovers de pseudo-elementos, não tem ordem que deixe a "casa arrumada".

0
Rosemeire Deconti

Rosemeire Deconti

05/03/2021 19:22

Luiz Vieira!


Muito grata pela resposta! O texto vai me esclarecer muito mesmo! Vou utilizar!

Valeu mesmo!!!

1
Luiz Vieira

Luiz Vieira

05/03/2021 19:11

Oi Rosemeire, boa noite.

Tudo bem?

Existe um método, chamado BEM, para estruturação dos arquivos CSS.

Dê uma olhada neste artigo: Organizando seu código: o que é método BEM e como utilizá-lo?

Espero ter ajudado.

Apaixonada por tecnologia e informação. Na área desde 1.984 e sem previsão de parar.

Brasil