airbnb
Pseudo selectors before or after element properties?
this:
.column {
&:before {
}
border: 1px solid $special-text-color-blue;
}
or this:
.column {
border: 1px solid $special-text-color-blue;
&:before {
}
}
@nalabdou , have you read the title of issue? :) I'm asking which order is correct, do I add pseudo selectors for an element before element properties or after?
I suppose as long as you choose something consistent, it’s fine?
conceptually it seems like I’d probably want “before”s to go at the top, and “after”s to go at the bottom.
I think this is a question of personal patterns. I always write the Element Properties and than I go to the included elements. In this way I have a better overview about everything. But however you do it, you have to follow consistent, then it is better to read.
it doesn't matter you can choose any of the two because writing pseudo selectors after or before element will make no difference.
I always use mine after the element itself
I use it like that... either for :focus & :blur etc... always at the bottom of the el { }
I usually pick the second one since it defines the pseudo-elements later after defining all the styling
I think this is based on personal preference, as I normally write my pseudo selectors after
from a maintainability perspective, the second code snippet is better because it places the border property first, then follows it with any pseudo-element selectors like :before. Makes the code easier to read in my opinion
you can put it anywhere you'd like, the code will not be affected by doing this
