This content originally appeared on DEV Community and was authored by Leonardo Rafael Wehrmeister
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
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">​</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>
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>
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>
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 👋
This content originally appeared on DEV Community and was authored by Leonardo Rafael Wehrmeister
Print
Share
Comment
Cite
Upload
Translate
Updates
There are no updates yet.
Click the Upload button above to add an update.
APA
MLA
Leonardo Rafael Wehrmeister | Sciencx (2022-01-21T16:59:48+00:00) Why “the best” css frameworks are sweeping dust under the rug? 🧹. Retrieved from https://www.scien.cx/2022/01/21/why-the-best-css-frameworks-are-sweeping-dust-under-the-rug-%f0%9f%a7%b9/
" » Why “the best” css frameworks are sweeping dust under the rug? 🧹." Leonardo Rafael Wehrmeister | Sciencx - Friday January 21, 2022, https://www.scien.cx/2022/01/21/why-the-best-css-frameworks-are-sweeping-dust-under-the-rug-%f0%9f%a7%b9/
HARVARDLeonardo Rafael Wehrmeister | Sciencx Friday January 21, 2022 » Why “the best” css frameworks are sweeping dust under the rug? 🧹., viewed ,<https://www.scien.cx/2022/01/21/why-the-best-css-frameworks-are-sweeping-dust-under-the-rug-%f0%9f%a7%b9/>
VANCOUVERLeonardo Rafael Wehrmeister | Sciencx - » Why “the best” css frameworks are sweeping dust under the rug? 🧹. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/01/21/why-the-best-css-frameworks-are-sweeping-dust-under-the-rug-%f0%9f%a7%b9/
CHICAGO" » Why “the best” css frameworks are sweeping dust under the rug? 🧹." Leonardo Rafael Wehrmeister | Sciencx - Accessed . https://www.scien.cx/2022/01/21/why-the-best-css-frameworks-are-sweeping-dust-under-the-rug-%f0%9f%a7%b9/
IEEE" » Why “the best” css frameworks are sweeping dust under the rug? 🧹." Leonardo Rafael Wehrmeister | Sciencx [Online]. Available: https://www.scien.cx/2022/01/21/why-the-best-css-frameworks-are-sweeping-dust-under-the-rug-%f0%9f%a7%b9/. [Accessed: ]
rf:citation » Why “the best” css frameworks are sweeping dust under the rug? 🧹 | Leonardo Rafael Wehrmeister | Sciencx | https://www.scien.cx/2022/01/21/why-the-best-css-frameworks-are-sweeping-dust-under-the-rug-%f0%9f%a7%b9/ |
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.