As I go back to the basics and learn vanilla CSS, I am increasingly leaning toward favoring sorting by declaration (grouping selectors) instead of using CSS/Sass variables. In another word, I find fewer reasons to use Sass because it might get in the way of achieving the "declare only once" principle that I recently discovered. I also find the idea of not needing Sass by merely getting into a good habit of sorting/grouping rather compelling.
Am I going toward the right direction here, or am I missing something I haven't considered?
I have disliked SCSS since I first saw it. To me everything systems like LESS/SASS do is pointless unless you're using two to ten times the CSS needed to do the job.
Grouping selectors makes CSS variables pointless. Leveraging selectors and semantics makes nesting feel like it compromises code clarity. Partials/imports makes code harder to debug since you have no idea what file before processing lines up with what you have in the document inspector. Mixins just encourage bloated sloppy practices and/or reek of "wah wah, eye duns wanna type" and/or a failure to know what ^C^V does. Operators are now supported in CSS3, but the only reason I would ever 'need' them has been eliminated by box-sizing which is supported all the way back to IE8.
The only thing it does that to me would serve any purpose is @extends, but that just involves thinking backwards on how you construct things since if you are grouping selectors, instead of this:
%message-shared {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.message {
@extend %message-shared;
}
.success {
@extend %message-shared;
border-color: green;
}
.error {
@extend %message-shared;
border-color: red;
}
.warning {
@extend %message-shared;
border-color: yellow;
}
Do this:
.message,
.success,
.error,
.warning {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
border-color: green;
}
.error {
border-color: red;
}
.warning {
border-color: yellow;
}
Which is less code to type, and results in deploying less code as well since their implementation just blindly copies all those properties to each and every blasted one of them.
Illustrating my biggest complaint, most of the time -- for me at least -- LESS/SASS/SCSS results in writing more code, that's harder to understand, that deploys as even more code than you wrote.
But again, I stand by my statement that very few legitimate websites have any excuse to use more than 48k of CSS in one file per media target. The only reason you see more than that is those two words I keep over-using.
SCSS and things like it are just another of these hot and trendy bits of nonsense I really have to question the knowledge and competence of those who use them by choice. They make things harder, convoluted, and just adds more steps and layers of complexity to the process. The exact opposite of what everyone seems to claim about them.
Hence my assuming either ignorance based lies, or willful malicious scam-artistry as the root of their existence.
I believe you are heading in the right direction. I've used Sass for a while, but I stopped using it on a regular basis because I found it quicker and easier to fiddle with CSS directly. And yes, I found the same thing; I get the same variable-like effect by grouping selectors by declaration.
Moving away from Sass is always a good direction, it has some design flaws that will increasingly cause problems as CSS continues to grow and add new features.
Write your CSS in the way that's easiest for you to express, troubleshoot, and maintain. If that means writing your selectors a certain way, do it. If that means making use of native CSS variables to store a value, do it :D
Dan W.
I found this article which present a compelling case against Sass:
meiert.com/en/blog/no-css-preprocessors
His case:
I find it a nice addendum to Jason Knight's already compelling argument.
As for me, I've been practicing grouping selectors as I go. I find it perfectly feasible to skip Sass at this point, at least in my case.