With specificity, comes great responsibility. Broad selectors allow us to be efficient, yet can have adverse consequences if not tested. Location-specific selectors can save us time, but will quickly lead to a cluttered stylesheet. Exercise your best judgement to create selectors that find the right balance between contributing to the overall style and layout of the DOM.
- Similar to the WordPress Coding Standards for file names, use lowercase and separate words with hyphens when naming selectors. Avoid camelcase and underscores.
- Use human readable selectors that describe what element(s) they style.
- Attribute selectors should use double quotes around values
- Refrain from using over-qualified selectors,
div.containercan simply be stated as.container
Correct:
|
1
2
3
4
5
6
7
|
#comment-form { margin: 1em 0;}input[type="text"] { line-height: 1.1;} |
Incorrect:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
#commentForm { /* Avoid camelcase. */ margin: 0;}#comment_form { /* Avoid underscores. */ margin: 0;}div#comment_form { /* Avoid over-qualification. */ margin: 0;}#c1-xr { /* What is a c1-xr?! Use a better name. */ margin: 0;}input[type=text] { /* Should be [type="text"] */ line-height: 110% /* Also doubly incorrect */} |