Along the week I've learned to organize my CSS utility classes a bit.

1. Properties

This classes consist only single property with a given name that reflects on the property it hook.

.d-block{display:block}
.d-flex{display:flex}
.mx-auto{margin-left:auto;margin-right:auto}

2. Resets and Small Components 

Consist of CSS resets for HTML elements and simple structure of reusable HTML element. This includes buttons, label chips. and custom spacing element.

button{padding:0.5rem 0.7rem}
a{text-decoration:none}
a:hover{text-decoration:underline}

/* hide obsoletes features */
.obsoletes{display:none!important;height:0!important;width:0!important;overflow:hidden!important;visibility:hidden!important;position:absolute!important}

3. Widgets

Styling for reusable components that consist of larger HTML structure that serve a single purpose. An example of this would be: header, footer links, featured post, and popular posts.

.widget-FeaturedPost {
  .post-title { /* ... */ }
  .post-body { /* ... */ }
}

4. Sections

Styling for layouts on which widgets are resides. For example: two column main content layout, and triple column of footer links.

.section-Min {
  .mainc-content { /* ... */ }
  .sidebar { /* ... */ }
}

5. Theme and Presets

Consist of CSS variables for the site to use. For example colors and font sizes.

:root {
  --bg-light: #f2f2f2;
}

***

While 1, 2, and 5 are commonly used, having 3 and 4 helps with separating the content a bit more. So, instead of having generic name for components and layouts, I could have something more concise and like widget-FeaturedPost, widget-FooterLink, and section-MainBody.