Why "the best" CSS frameworks are sweeping dust under the rug? 🧹
Tags: css, html, react, vue
Published: 2022-01-21 16:59:48

Hello devs 👋, 

I'm here to expose some questions without answers in this post. I do not want to promote any framework here. It's only a post to think about it. I'll show some of the HTML output that I classified as "sweeping dust under the rug", that means hidden the bad/ugly/illegible code (HTML output) inside a component. All frameworks have to implement the same design system, to be comparable here.

<hr>

## The questions

- Why the most starred, used and sponsored CSS frameworks do that?
- Why do we need to be guided by a work like that?
- Why do we have a lot of contributors that support things like that?
- Why don't they accept criticism?
- Why do they justify the bad code with answers like "do not recreate the wheel", "it's the most used", "it's the react/vue/* choice", "has a big community"?
- Are we limited by the popular CSS frameworks?
- Are we in a marketing game?
- Are we guided by "influencers dev" or "real devs"?
- Are they losting the love of code?

<hr>

## Examples of HTML output

We are trying to render an outline input and a button. This section will show the HTML output generated by some popular frameworks:

<hr>
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jsr125dq0nkixkmnwza8.png">
## Vuetify
https://vuetifyjs.com/ (~1040kb)

```html
// an outlined input
<div class="v-input theme--light v-text-field v-text-field--is-booted v-text-field--enclosed v-text-field--outlined v-text-field--placeholder">
  <div class="v-input__control">
    <div class="v-input__slot">
      <fieldset aria-hidden="true">
        <legend style="width: 0px;">
          <span class="notranslate">&ZeroWidthSpace;</span>
        </legend>
      </fieldset>
      <div class="v-text-field__slot">
        <label for="input-535" class="v-label theme--light" style="left: 0px; right: auto; position: absolute;">Outlined</label>
        <input id="input-535" type="text">
      </div>
    </div>
    <div class="v-text-field__details">
      <div class="v-messages theme--light">
        <div class="v-messages__wrapper"></div>
      </div>
    </div>
  </div>
</div>


// a button
<button type="button" class="v-btn v-btn--is-elevated v-btn--has-bg theme--light elevation-2 v-size--default" file="v-btn/usage">
  <span class="v-btn__content">
    <span>Click Me</span>
  </span>
</button>
```

<hr>
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6lqdv5syzs8f5utabwdt.png">
## Material UI
https://v4.mui.com/ (~329kb)

```html
// an outlined input
<div class="MuiFormControl-root MuiTextField-root">
  <label class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-outlined" data-shrink="false" for="outlined-basic" id="outlined-basic-label">Outlined</label>
  <div class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl">
    <input type="text" aria-invalid="false" id="outlined-basic" class="MuiInputBase-input MuiOutlinedInput-input" value="">
    <fieldset aria-hidden="true" class="jss64 MuiOutlinedInput-notchedOutline">
      <legend class="jss66">
        <span>Outlined</span>
      </legend>
    </fieldset>
  </div>
</div>

// a button
<button class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary" tabindex="0" type="button">
  <span class="MuiButton-label">Primary</span>
  <span class="MuiTouchRipple-root"></span>
</button>
```

<hr>
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/06o4zzu8652b26qkhccq.png">
## Material Design Components
https://material.io/components (~921kb)

```html
// an outlined input
<div class="inline-text-field-container">
  <div class="mdc-text-field mdc-text-field--outlined">
    <input class="mdc-text-field__input" autocorrect="off" autocomplete="off" spellcheck="false" id="demo-mdc-text-field" maxlength="524288">
    <div class="mdc-notched-outline mdc-notched-outline--upgraded">
      <div class="mdc-notched-outline__leading"></div>
      <div class="mdc-notched-outline__notch">
        <label for="demo-mdc-text-field" class="mdc-floating-label" style="">
          <!---->Label
          <!---->
        </label>
      </div>
      <div class="mdc-notched-outline__trailing"></div>
    </div>
  </div>
</div>

// a outlined input
<button class="mdc-button mdc-button--raised inline-demo-button mdc-ripple-upgraded">
  <span class="mdc-button__label">
    <!---->Button
    <!---->
  </span>
  <div class="mdc-button__ripple"></div>
</button>
```

<hr>
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/supxq5079rdbujebuqy5.png">
## Beer CSS 
https://www.beercss.com (~62kb, newest and not popular) 

```html
// an outlined input
<div class="field label border">
  <input type="text">
  <label>Label</label>
</div>

// a button
<button>Button</button>
```

<hr>

That's it guys, just think about it!
Bye 👋