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?
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:
Vuetify
https://vuetifyjs.com/ (~1040kb)
// 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
https://v4.mui.com/ (~329kb)
// 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
https://material.io/components (~921kb)
// 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>
Beer CSS
https://www.beercss.com (~62kb, 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 👋
Top comments (8)
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.
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.
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
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.
Are we in a kind of "Matrix" where we accept the things they want to be accepted? 😂😮💊
I don't use CSS frameworks... what do you mean by "sweeping dust under the rug"?
In this case "sweeping dust under the rug" means hidden the bad/ugly/illegible code (html output) inside a component.
Okay? Maybe you might want to define that more clearly in your article...