Do you avoid adding unnecessary CSS classes?

<introEmbed
  body={<>
When creating or editing CSS or HTML, it's important to avoid adding unnecessary classes and IDs.

It can be tempting to add classes to elements, as it's often the most obvious solution to CSS problems. However doing so can lead to cluttered code and overly specific solutions. When working with CSS, it's almost always better to reuse existing classes rather than adding new ones.
  </>}
/>
You should [use a front-end CSS framework](/css-frameworks), like [Bootstrap](https://getbootstrap.com/) or [Tailwind](https://tailwindcss.com/). The best front-end frameworks will include most of the clases you will need on a project. Basically you will only need new classes for **very specific** layout elements.

<asideEmbed
  variant="greybox"
  body={<>
    **HTML:**

```html
<a class="view-all-link" href="https://www.youtube.com/playlist?list=PLIzW_0dAIKv3mjBeK8eyJbe1bOGWJX_UV">View All</a>
```

**CSS:**

```css
.view-all-link {
  margin-top: 0;
}
```

  </>}
  figureEmbed={{
    preset: "badExample",
    figure: 'Bad example - The "view-all-link" class was added unnecessarily',
    shouldDisplay: true
  }}
/>

<asideEmbed
  variant="greybox"
  body={<>
    **HTML:**

```html
<a class="mt-0" href="https://www.youtube.com/playlist?list=PLIzW_0dAIKv3mjBeK8eyJbe1bOGWJX_UV">View All</a>
```

  </>}
  figureEmbed={{
    preset: "goodExample",
    figure: 'Good example - Using a front-end framework class has the same effect without adding any extra CSS ruleset',
    shouldDisplay: true
  }}
/>