LESS CSS - Not reinventing the wheel

Question

By “wheel” I mean the nested selector path.

I’ve converted a somewhat large CSS file to LESS for the most part, nesting rules in DOM order. However, some of my styles are being overridden. Basically, all of the “plain” styles have been nested making their output CSS rules extremely specific (which I want). What’s not so specific are the rules where the parent elements have classes attached. Example:

Regular nested rules:

.grandparent {
  some: style;

  .parent {
     other: style;

     .child {
       you: get;

       .grandchild {
          the: picture;
       } 
     }
   }
}

So, the issue I’m having is adding styles to the grandchild if the grandparent has a specific class attached. Something like:

.grandparent.visiting .grandchild {
  visibility: hidden;
}

Is there a way to neatly add .visiting to the big hierarchy I’ve already built? Or do I have to redo the entire nesting order for all the child element selectors affected by .grandparent.visiting?

Not sure if this a noob thing. I just started with LESS a couple weekends ago. But I can’t seem to find any solutions using :not and the & selector (as superb as it is) doesn’t seem to help here either.

score 0 · Answer 1 · answered Dec 05 '21 at 09:11

0

You can reference the current selector using the & symbol, then write selectors after it as it was in one line.

.grandparent {
  some: style;

  &.visiting {
    .grandchild{ 
        visibility: hidden;
    }
  }
}

answered Dec 05 '21 at 09:11

Ambrus Tóth

552
6
14

That’s how I started to do it, but that is more or less what I’m trying to avoid. It does seem like that might be the only way to get it done though. – Julian Brooks Dec 05 '21 at 15:23
Why exactly do you want to avaid this? By the way, you can add this to the end of your current file, you can write more than one .grandparent selectors, so you don't have to refactor the whole code. – Ambrus Tóth Dec 09 '21 at 16:45
The less-complex selectors seem to get ignored because the original rule sets have more specific selectors. The only way I know to fix it is to add all the parent selectors. – Julian Brooks Dec 10 '21 at 00:16
You can use !important to override the more specific selectors. Btw you shouldn't be too specific with your selectors. https://css-tricks.com/sass-style-guide/#maximum-nesting-three-levels-deep – Ambrus Tóth Dec 10 '21 at 21:30

LESS CSS - Not reinventing the wheel

1 Answers1