Technical Blog: Best Practices For Using Classes vs. IDs

August 17th, 2014

CSS selectors are used to "find" (or select) HTML elements based on their ID, classes, types, attributes, values of attributes and much more.

Classes: The class selector finds elements with the specific class. The class selector uses the HTML class attribute. To find elements with a specific class, write a period character, followed by the name of the class.

example_class

IDs: The ID selector uses the ID attribute of an HTML tag to find the specific element. To find an element with a specific id, write a hash character, followed by the ID of the element. The style rule below will be applied to the HTML element with id="para1":

example_id

Best practices:

  1. Classes:
    • The style is used in various places throughout the document.
    • The style is very general.
  2. IDs
    • The style is only used once ever in the document.
    • The style is specific to a certain area of the document.