Category: Fundamentals

IDs vs. Classes vs. Utility Classes

A common beginner mistake in web design is styling elements at the ID level. Since Automatic.css includes variable hooks that allow for custom styling, it’s important to know the difference between IDs and Classes. It’s also important to know what Utility Classes are so you can better understand how and why to use them.

Need to Know

  • Controlling the style and behavior of elements at the ID level only applies to that individual element and is typically undesirable. 
  • Controlling the style and behavior of elements at the class level is safer and more powerful because it allows for global control over any element that has that class.
  • Utility classes are “preset” classes that control specific aspects of an element’s styling or behavior.
  • When people refer to “custom classes” they are referring to classes you create for use on specific elements only. These classes are exclusive to a certain element or group of elements to allow for global styling of those specific elements.