Denominazione di classi e ID CSS

Non sono un esperto di HTML / CSS quindi prendi questa risposta con un tocco di sicurezza, ma penso che manchi ancora l'essenza del perché il CSS esista in primo luogo.

Nel passato, avevamo solo l'HTML quindi sì, si poteva dire esattamente quale fosse la dimensione, il colore, il riempimento ... ecc. di ogni elemento, ma questo rendeva anche HTML più difficile da leggere più difficile da modificare se mai volevo provare diversi layout e / o combinazioni di colori.

I CSS sono stati introdotti in modo da poter avere una separazione ben definita e chiara tra struttura / contenuto del documento (HTML) e il suo aspetto visivo (CSS). Quindi vuoi elementi con nomi come "blog-footnote" e "gallery-thumb" perché in HTML questi nomi aiutano ulteriormente a definire la struttura e il significato dell'elemento. Vedi l'elemento e sai esattamente a cosa serve.

Quei nomi sono "inutili" nel senso che non hai ancora idea di come (o anche dove) quell'elemento apparirà sullo schermo, ma HTML non dovrebbe darti queste informazioni. Ecco a cosa serve CSS.

Per capire meglio questa separazione, dai un'occhiata a CSS Zen Garden . Questo è esattamente lo stesso documento HTML (vale a dire lo stesso contenuto) ma presentato utilizzando diversi stili CSS che le persone hanno inviato.

I can name them hide-upper-space or small-seethrough-border... On the contrary, I can name them blog-footnote or gallerythumbs-upper-left...

Dovresti fare nessuno di questi.

Invece, dovresti favorire un framework CSS per dispositivi mobili * come Bootstrap che ha un convenzione di denominazione semantica :

1. Semantic class names. Building reusable components is a challenge in designing any kind of framework, and since Bootstrap is about style we want reusable style definitions. The classes provided by Bootstrap are meaningful without being specific about presentation details. For example, classes like warning, important, info, and alert all have an obvious meaning, but they don't give away any spoilers about the background colors they'll use. You can then use these Bootstrap classes in any application and even with heavy amounts of customization, the class names still make sense.

• Il layout di griglia di Bootstrap significa che puoi scrivere il tuo markup per avere un aspetto gradevole su tutti i fattori di forma. Classi come small-seethrough-border e gallerythumbs-upper-left sono un "odore di codice" per me perché implicano che la pagina è stata scritto per un solo fattore di forma.

Bene, per iniziare con ID e le classi non sono in realtà un concetto CSS, piuttosto, sono utilizzate per identificare determinati elementi HTML - CSS e JavaScript possono quindi utilizzarli. Quindi entrambi fanno parte dell'HTML e dovrebbero essere descrizioni semantiche , HTML fornisce struttura e contesto semantico - non stile.

Quindi i nomi migliori descrivono l'elemento (ID) o il tipo di elemento (classe). Questo è più in linea con il tuo secondo esempio. I nomi di ID e classi sono più analoghi alle variabili di denominazione che a indicare quali stili si desidera dove. Se un elemento è il contenitore per un commento, assegnagli la classe commentCointainer , se è la barra dei menu principale, assegnagli l'ID menuBar .

Ricorda che se rendi la classe underlined-text allora hai sostanzialmente ovviato al punto del CSS esterno, sarebbe più semplice usare semplicemente l'attributo style. I nomi di classi e ID che descrivono lo stile renderanno anche più difficile cambiare in seguito. Supponiamo che ci sia un'area della mia pagina blu, quindi la chiamo bluePart - questo è descrittivo dello stile, ma se in seguito voglio che sia rosso dovrò correggerlo nell'HTML e nel CSS ( anche peggio se si tratta di una classe che si presenta in più posti in molti file).