DEV Community

Discussion on: An ode to the CSS owl selector

Collapse
 
leandro_n_ortiz profile image
Leandro Ortiz

Regarding the performance, the Owl selector uses the + that will search for the adjacent element. So, the second universal selector * will not hit performance. It would have the same performance of a single universal selector.
I always use it together with a > that will search only for the first child, so it impact less performance.
So, for example, to add a left-margin for all the items (except the first) in a row:

.my-row-class > * + * {
  margin-left: 12px;
}
Enter fullscreen mode Exit fullscreen mode

There is a good explanation about performance here: github.com/stylelint/stylelint/iss...

Collapse
 
vyckes profile image
Kevin Pennekamp

You have no idea how well timed your comment is for me ;). I had a colleague asking me about its performance just af few days ago!

I agree the usage with the > or at least a specific class before it that you know it is not extremely nested.

Collapse
 
leandro_n_ortiz profile image
Leandro Ortiz

Cool, great to know that it helped!
I learned it when I was trying to understand why stylelint complains about having two universal selectors together. Then I found this link: github.com/stylelint/stylelint/iss...