Skip to main content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

Https

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Specificity

  • IDs should be reserved for JavaScript. Don’t use IDs for styles.

    // Bad
    #component { }
    
    // Good
    .component { }
    
  • Don’t nest more than 3 layers deep.
  • Do not fix problems with !important. Use !important purposefully.

    // Bad
    .component {
      width: 37.4% !important;
    }
    
    // Good
    .hidden {
      display: none !important
    }
    
  • Keep specificity low and trend upwards in specificity as you move further down file. See the specificity graph section for more info.
  • Don’t use unnecessary tag selectors.

    // Bad
    p.body_text { }
    
    // Good
    .body_text
    
  • If you have to hack specificity, use a safe hack: the multi class.

    // multi-class hack
    .component.component { }
    

Specificity graph

An easy rule to use when dealing with specificity is to start from a low specificity and curve to higher specificity as you move towards the bottom of the output file. Since CSS rules get replaced by rules further down in the file, you’ll override rules in an expected way.

There’s a tool that can graph your files’ specificity, CSS specificity graph. Run your final output file through this tool and strive for a curve trending upwards.

Resources

Rationale

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.

  • When modifying an existing element for a specific use, try to use specific class names. Instead of .listings-layout.bigger use rules like .listings-layout.listings-bigger. Think about ack/grepping your code in the future.

  • 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.container can simply be stated as .container.

  • IDs should be reserved for JavaScript. Unless you have a very good reason, all CSS should be attached to classes rather than IDs. When in doubt, use a class name. This prevents target confusion and allows CSS devs and JS devs to co-exist in the same code in peace. If you must use an id selector (#id) make sure that you have no more than one in your rule declaration.

Looking for U.S. government information and services?

Visit USA.gov