DEV Community

Leonardo Rafael Wehrmeister
Leonardo Rafael Wehrmeister

Posted on • Updated on

Why "the best" css frameworks are sweeping dust under the rug? ๐Ÿงน

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.

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?

The HTML output that I classified as "sweeping dust under the rug" needs to render a default outline input and a default button


Image description

Image description
Vuetify (~1040kb)
https://vuetifyjs.com/

// 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>
Enter fullscreen mode Exit fullscreen mode

Image description
Material UI (~329kb)
https://v4.mui.com/

// 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>
Enter fullscreen mode Exit fullscreen mode

Image description
Material Design Components (~921kb)
https://material.io/components

// 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>
Enter fullscreen mode Exit fullscreen mode

Image description
Beercss (~62kb)
https://www.beercss.com
(newest and not popular)

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

// a button
<button>Button</button>
Enter fullscreen mode Exit fullscreen mode

That's it guys, just think about it!
Bye ๐Ÿ‘‹

Discussion (9)

Collapse
collimarco profile image
Marco Colli

I know that is not a popular opinion these days, but I still like compact, semantic HTML and then CSS.

Mainly using SASS or something similar to BEM.

The problem with Bootstrap (and the framework Beercss that you mentioned) is that they lack customization. They are very rigid. You cannot make a complex or custom design - otherwise you need to mix them with CSS and it becomes a pain!

For this reason Tailwind is gaining popularity... However all those long classes still don't fully convince me.

Collapse
valbuena profile image
valbuena

i sincerely feel the same about tailwind.. ye ye.. you can make complex and custom designs but .. all of these long long classes and combinations ewww.. ill stick to bulma and my custom modular utilities in sass.

Collapse
stephanie profile image
Stephanie Handsteiner

I don't use CSS frameworks, because they're mostly too opinionated in their UI.

You can't make own design choices, as you'll end up fighting the framework while overriding its defaults, and that's not what a Framework should be like โ€“ it should take work away from you, not just shift the work elsewhere.

Tailwind is a start in the right direction in that sense, as its UI components are optional, and it's merely a utility framework, but using it, as intended, you end up with equally ugly class soup in the markup, as you know from Bootstrap already.

Collapse
romeerez profile image
Roman Kushyn

All css frameworks are like that: they are shipped with predefined components, and if you want something else or the same but with different design - out of luck.

In case if you're suggesting beercss - please show us how to do the same select but with autocomplete, very typical task, needed almost on any project and it's always a pain to keep it in the same style as other site. So if it's hard to do with beercss that's because it doesn't really solve a problem of all css frameworks and it's just more lightweight

Collapse
leonardorafael profile image
Leonardo Rafael Wehrmeister Author

I think that frameworks are not the right choice who want a custom design. Despite that a custom design usually is the minimal part of the system.

Beercss can handle the html/css part of autocomplete combining the elements codepen.io/leo-bnu/pen/zYzLNGx. You need to do the js logic here, but It's not a pain to do that using vue/react/angular/svelte.

I think the Beercss can deliver more than what we saw on its homepage.

Collapse
leonardorafael profile image
Leonardo Rafael Wehrmeister Author

Are we in a kind of "Matrix" where we accept the things they want to be accepted? ๐Ÿ˜‚๐Ÿ˜ฎ๐Ÿ’Š

Collapse
codingjlu profile image
codingjlu

I don't use CSS frameworks... what do you mean by "sweeping dust under the rug"?

Collapse
leonardorafael profile image
Leonardo Rafael Wehrmeister Author

In this case "sweeping dust under the rug" means hidden the bad/ugly/illegible code (html output) inside a component.

Collapse
codingjlu profile image
codingjlu

Okay? Maybe you might want to define that more clearly in your article...