CSS Best Practices

Use semantic "class" and "id" values

You can choose class and id values when authoring your CSS and HTML. A good rule is to create "logical" class and id values and not "descriptive" ones. Remember, you've gone to the trouble of separating markup and presentation -- keep this separation when creating class names.

If you can guess how the class is styled based upon the name, this should cause you to consider changing the name.

Choosing class and id names appropriately will help with:

• evolution
  Your #rightnav may very well become navigation positioned on the left side or the top.
  Your .redbold may very be changed to another color or background entirely.
• specificity and semantics
  If you have a .dottedborder class, you may wish to change how your thumbnail images are styled, but leave presentation of other markup that you've given the same class to unchanged.

What about "utility" classes and CSS frameworks?

Yes, I know the approach of using "utility" classes.
I strongly recommend learning the "semantic" approach first.

What do I mean by "utlity" classes? -- something that looks like:

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
  <div class="shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-slate-500">You have a new message!</p>
  </div>
</div>

The semantic approach might look like:

<div class="chat-notification">
  <img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
  <div class="content">
    <h4 class="title">ChitChat</h4>
    <p class="message">You have a new message!</p>
  </div>
</div>