Discussion on: Rethinking CSS

[Louis Low]

I refactoring my client existing UI so often. And some projects using different types of CSS frameworks. Touching the stylesheet is a true nightmare.

My solution is to keep the existing class names untouched across all the HTML files and refactoring the CSS class property with injecting Yogurt utility modules into something like these:

<div class="title">
  ...
  <div class="desc">
    ...
  </div>
</div>

.title {
  @extend
    .p-2,
    .text-lg, 
    .font-semibold;

    &:hover {
      @extend
        .underline;
    }
}

.desc {
  @extend
    .text-sm, 
    .truncate;
}

Once the refactoring is done with the Yogurt CSS. The next UI development for me will be faster, cleaner, and efficient.