Best Practices for ID and also ClassNames

Article from August 12, 2008 (↻ August 19, 2021), filed under Net Growth.This and many various other write-ups are additionally available as a pretty, well-behaved ebook: On Internet Advancement. If the optimization of CSS is of specific import to you, I’ve built up a number of principles in a brief book: CSS Optimization Basics.

You are watching: Why is it important for element ids to have meaningful names?

I’m working on an additional article for Gerguy Dr. Net mag, this time extending referrals for IDs and also classes, an problem likely as old as the Internet itself. Taking a various approach than usual I’m feeling free to publish a “guerrilla sneak preview” in this area.

Talking about use of IDs and also classes exclusively as style sheet selectors (as opposed to scripting hooks) and also assuming expertise about as soon as to use what (I understand that the majority of of my readers are experienced), the best points to perform are, in this order:

1. Keep Use of IDs and also Classes to aMinimum

Unless IDs are necessary for somepoint various other than styling (choose serving as inner connect targets), try to prevent them and also classes as this is “cognitively easiest” and also the leastern of a maintenance burden. (Don’t confusage structural—which deserve to always take place and against which you cannot defend yourself—with visual alters.)

2. Use Functional ID and also ClassNames

Deriving names from usability (for instance nav, warning) is commonly the second ideal alternative, as this is tied to the framework and also helps conceptual expertise and teamwork. It is much less of a maintenance trouble as the page facet in question might not adjust its definition, and as soon as it does, it needs even more substantial changes.

3. Use Generic ID and ClassNames

If you cannot derive a great name from an element’s feature, or if you occur to present somepoint exclusively for styling (e.g. for that still famous alternate styling of table rows), use generic, “neutral” names (for instance auxcode> or alt, alternative). This is not necessarily right for expertise and teamwork but it is less likely to impose maintenance difficulties.

Also: Use Names That Are as Quick as Possible But as Long asNecessary

Typically speaking, try to acquire to the allude (nav), but don’t sacrifice comprehension (about).

See more: How To Get Wario In Super Mario 64 Ds, Super Mario 64: Can You Play As Wario

❧ The truly worst point to execute, no matter what other people say, is to use presentational names (for instance red, left, anything that has something to do with layout). This hregarding be avoided at all costs as it cuts you out of all maintenance benefits CSS offers you.

Skipped currently yet most likely to be consisted of in that upcoming article are “chameleon semantics” and also “pseudo-namespaces.” But probably that’s currently telling