Using IDs in LESS

Question

I've started using LESS recently and it's really convenient, and I have a question: as it's really convenient to place element inside the brackets to clarify the style structure, in .CSS file that's being generated I end up seeing things like this:

#second-block .side-menu #category .content{...}

Is this okay to have id elements inside other id elements, even though I use LESS?

Just make sure that you won't land with something like [this](https://github.com/less/less.js/issues/2365) or [this](https://github.com/less/less.js/issues/2551). I.e. if it's supposed to be `#category .content` selector, do not make it `#second-block .side-menu #category .content` (i.e. the other observation is "Nesting for the sake of nesting is evil"). Though technically all this makes your Q to be quite offtopic as "primarily opinion-based". — seven-phases-max, Feb 01 '16 at 21:44

score 1 · Accepted Answer · edited May 23 '17 at 12:07

Yes. It's ok to have id element inside other id elements.

The generated .css will work.

Personally, I like to use as few id elements in my code as possible. The reasoning behind this, is how some browsers don't like it when you have multiple instances of the same id on the page. I find that using classes is more flexible.

Here's a relevant stack overflow question that mentions on ids vs. classes:

Is there any pros and cons if i use always CSS Class instead CSS ID for everything?

Using IDs in LESS

1 Answers1