Tailwind
So, there is Tailwind. One of the argument tailwind's fan provide in favor of this library is that you ship only the utilities you use, hence minimal CSS.
If this is the only argument to consider then my CSS-in-JS is the way to write CSS as I ship close to none.
What tailwind fans don't mention is that some of the bytes you save from CSS file is actually transferred to your HTML.
In other words, the CSS you ship is smaller, but your HTML file getting slightly bigger.
I would like to see an analysis of how much bytes are really removed if you take into account the size of HTML as well.
Alternative 1
How can one really minimize the styling portion of its application?
A very complicated approach would be to write a script/library that will check which parts of the styles are being repeated and group them together. Hard to implement, or not already available in every development ecosystem.
Alternative 2
What would make a simpler approach?
What comes to my mind is: a component-based approach with properly defined boundaries. A component must:
- Define the styles it uses, regardless of the context it is being used in. (i.e. no placement style (margin, top, flexbox properties, etc.))
- Leave these "placement styles" to the parent components
- Have a limited numbers of placement components.
This means that a button component defines its color, padding, borders, but never its margins.
The component that uses this button must define its placement, (ex: I have a row of buttons with x margin in between).
Grid systems
I have recently been using Carbon on a Svelte project.
My first opinion of the library has been that its rigid. A good component library is also composable. Carbon would get about a 5 out of 10 if I had to rate it based on that criteria.
This being said, this lack of flexibility made me think more about its intended usage. That's when I discovered their grid system.
A grid system is the ultimate CSS optimization system one can use and matches the criteria I defined above.
When I tried to base my code solely on this grid, I was using close to no CSS (small project, 5 screens, no color customization, I ended up using a width: 100% and a float: right).
That's when I fell in love with the Carbon grid.
Top comments (0)