I’ve got a question for all the frontend guys here. First of all, this is not about placeholders vs mixins as I’ve already have an idea about, whether to use one or another.
So the question is – do you use SASS placeholders with just one, or perhaps two rules to avoid multiple occurrences in the resulting CSS output?
As an example consider a page, where you need to float many, many, many different elements to the left. Would it be a good idea to create a placeholder with just “float: left” and extend it as needed? That would result in one “float: left” declaration for multiple selectors in the CSS output, instead of being declared all over again for each selector. I could give more situations, for example equal margins/paddings for many elements and so on.
It’s not about using variables as that would also result in redeclaration for each selector. It’s also not about avoiding “classitis”. It’s about declaring a rule all over again in the compiled CSS. And, if in the future you would need to add some clearing or just about anything to all floated elements, you could just change the placeholder
Here’s a code example (please don’t mind the naming, it’s just for illustrational purposes):
// Placeholders
%left {
float: left;
}
%margin {
margin: 20px;
}
// Selectors, which use the defined placeholders
.selector-1 {
@extend %left;
@extend %margin;
// Other rules
}
.selector-2 {
@extend %left;
// Other rules
}
.selector-n {
@extend %left;
@extend %margin;
// Other rules
}
Resulting in the following CSS:
.selector-1,
.selector-2,
.selector-n {
float: left;
}
.selector-1,
.selector-n {
margin: 20px;
}
.selector-1 {
// Other rules
}
.selector-2 {
// Other rules
}
.selector-n {
// Other rules
}
Instead of:
.selector-1 {
float: left;
margin: 20px;
// Other rules
}
.selector-2 {
float: left;
// Other rules
}
.selector-n {
float: left;
margin: 20px;
// Other rules
}
Would it have an impact on the page performance? Would it lead to more messy and hard to manage code? What would be your approach on this?
I’m definitely not looking for a specific and final answer. Just rather some thoughts, insights and personal experience.
This is a very interesting question and I am very interested in what others think as well. I have been using sass for a while now and for the most part I tend not to use the @extend functionality at all. In the case of float left or right everywhere I would probably just make a class .float-left and just add it to the markup that needs to be floated or just have float:left in the selector’s rule.
As far as code quality is concerned when you have just one rule in the thing you are extending you aren’t really gaining any maintainability. When it comes to 2 or more rules in an extend that should help from a maintainability aspect. On the flip side you can still just add both selectors to the markup, I don’t have a strong opinion on which is better.
.float-left-pad {
float:left;
padding: 5px;
}
.selector1 {
@extend:.float-left-pad
..
}
div.selector1
vs
.selector1 {
...
}
div.selector1.float-lef-pad
I really have no clue what your code base it but I would be slightly concerned about using @extends to write maintainable terse css. When I have commonly used values or markup I tend to put them into mixins or variables to promote code over @extends. This approach tends to work for the projects of the complexity that I work on but that may not be enough for other’s cases. I can see cases where the using @extends will produce more terse code but I think that comes at the expense of complexity of your sass code.
I highly doubt any approach will impact the page’s performance to make it an issue and if it does you can address that issue when it becomes one. No need to be concerned about performance until you start seeing it degrade.