4 ms·
The biggest bloat is that for every component you are always sending all the css for every possible combination of feature that might be used on that component.
by crucialfelix 10y ago
The biggest bloat is that for every component you are always sending all the css for every possible combination of feature that might be used on that component.
https://github.com/twbs/bootstrap/blob/v4-dev/scss/_card.scss https://github.com/twbs/bootstrap/blob/v4-dev/scss/_card.scs...
.card-outline-warning
.card-blockquote
.card-footer / .card-header
.card-footer &:last-child
.card {
> .list-group:first-child {
.list-group-item:first-child {
etc. etc. It's 280 lines of source code (before you even run auto-prefixer)
Each one of these components repeats styling that other components will use. Because they want it easy to use so you just apply .card instead of individually composing all the style effects you want.
The other day I used semantic-ui, just added in a few components and it was 56k compressed. Because the component ships with support for all options, not just what you use.
- janpieterz 10y agoTrue, all those variants to allow the developer flexibility. That's why plugins like purifycss[1] etc are interesting. When properly used and configured, a developer has the full framework under his fingers, while not outputting anything unused to the users. [1]: https://github.com/webpack-contrib/purifycss-webpack https://github.com/webpack-contrib/purifycss-webpack
- crucialfelix 10y agoFor that to really work we need a way for react components, Ng directives etc to export classes they use so that purify can parse them. Do you know or use such a setup ? Edit. Oh it does read react and classNames. I'm sold!