I'm not sure you understood correctly what I meant. Or maybe is it me. Hehe.
To reiterate: you can link and load CSS for a component just when this component is used instead of loading everything at first. So the first load of the page is faster. Same thing with media queries in link tags. Isn't that something Tailwind can't do? Tailwind will load every style, every time, right?
As for your example, I get your pain. I' ve experienced it too. But it isn't a reason for completely pushing aside CSS in favor of a framework and all that it entails. It is a reason to have good linting.
For example, no component should ever influence the "outside world". So no margins on components. Rhythm (gaps or margins) is better taken care of by the parent (a grid, a list, etc.). This is a simple linting rule in Stylelint that will prevent this development behavior.
As for the rest of your problem, I'd say the "mixin" approach is of disservice here. That and, the way you implement the filters.
Are filters to be arbitrarily applied on the whims of the designer? Creating filter classes to be applied in a singular way then may be a good approach.
Are there rules governing the usage of the filters? Then a systemic approach could be a winner, especially if you can talk with the designer.
There are simple ways of managing these issues/problems with native technology and a little linting.
PS: Sometimes the problem IS the design. If the design is irrational, the real, efficient solution is not to implement these irrational patterns but to talk with the designer and find a rational solution. I know this isn't always easy but that is the problem resolution we should strive for as it is the most efficient one.
I think we largely agree, so I'll go back to focusing on the tool.
> Isn't that something Tailwind can't do? Tailwind will load every style, every time, right?
Tailwind's only function is:
- Scan codebase
- Generate classes
- Save them in a file with the a .css extension.
Anything else that you want is outside the scope of the tool. It makes no assumptions about what your files are named, where they are, or how it's loaded in the browser. At the end of the day, it's up to the developer to write `<link rel="stylesheet" href="/path/to/my/generated/file.css">`
This is no different or made easier/harder by using Tailwind.
To reiterate: you can link and load CSS for a component just when this component is used instead of loading everything at first. So the first load of the page is faster. Same thing with media queries in link tags. Isn't that something Tailwind can't do? Tailwind will load every style, every time, right?
As for your example, I get your pain. I' ve experienced it too. But it isn't a reason for completely pushing aside CSS in favor of a framework and all that it entails. It is a reason to have good linting.
For example, no component should ever influence the "outside world". So no margins on components. Rhythm (gaps or margins) is better taken care of by the parent (a grid, a list, etc.). This is a simple linting rule in Stylelint that will prevent this development behavior.
As for the rest of your problem, I'd say the "mixin" approach is of disservice here. That and, the way you implement the filters.
Are filters to be arbitrarily applied on the whims of the designer? Creating filter classes to be applied in a singular way then may be a good approach.
Are there rules governing the usage of the filters? Then a systemic approach could be a winner, especially if you can talk with the designer.
There are simple ways of managing these issues/problems with native technology and a little linting.
PS: Sometimes the problem IS the design. If the design is irrational, the real, efficient solution is not to implement these irrational patterns but to talk with the designer and find a rational solution. I know this isn't always easy but that is the problem resolution we should strive for as it is the most efficient one.