Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
January 21, 2022 04:59 pm GMT

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". 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", that 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>

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>

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>

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>

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


Original Link: https://dev.to/leonardorafael/why-the-best-css-frameworks-are-sweeping-dust-under-the-rug-2o0h

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To