Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>There's no requirement that all styles for a selector reside in a single rule, and a single rule can apply to multiple selectors... so <em>flip it around</em>:</p> <pre><code>/* Theme color: text */ H1, P, TABLE, UL { color: blue; } /* Theme color: emphasis */ B, I, STRONG, EM { color: #00006F; } /* ... */ /* Theme font: header */ H1, H2, H3, H4, H5, H6 { font-family: Comic Sans MS; } /* ... */ /* H1-specific styles */ H1 { font-size: 2em; margin-bottom: 1em; } </code></pre> <p>This way, you avoid repeating styles that are <em>conceptually</em> the same, while also making it clear which parts of the document they affect. </p> <p>Note the emphasis on "conceptually" in that last sentence... This just came up in the comments, so I'm gonna expand on it a bit, since I've seen people making this same mistake over and over again for years - predating even the existence of CSS: <strong>two attributes sharing the same value does not necessarily mean they represent the same <em>concept</em></strong>. The sky may appear red in the evening, and so do tomatoes - but the sky and the tomato are not red for the same reason, and their colors <em>will</em> vary over time independently. By the same token, just because you happen to have two elements in your stylesheet that are given the same color, or size or positioning does not mean they will <em>always</em> share these values. A naive designer who uses grouping (as described here) or a variable processor such as SASS or LESS to avoid <em>value</em> repetition risks making future changes to styling incredibly error-prone; always focus on the <em>contextual meaning</em> of styles when looking to reduce repetition, ignoring their <em>current values</em>. </p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload