prevent styles from applying by cascade when using LESS nested rules - html

Question

We're developing a large plugin based front-end system and trying to figure out how to compose CSS rules. Basically there are two ways:
Specify parents in the class name
Specify parents in the selector (by using LESS nested rules)
And the corresponding HTML:
<div class="dashboard">
<span class="dashboard__title"></span>
<div class="custom-widget">
<span class="dashboard__custom-widget__title"></span>
</div>
</div>
And for second approach:
<div class="dashboard">
<span class="title"></span>
<div class="custom-widget">
<span class="title"></span>
</div>
</div>
I want to specify specific style for .title inside .dashboard, so using the first approach CSS will look like that:
.dashboard__title {
//styles here
}
With the second approach CSS will look like this:
.dashboard .title {
//styles here
}
which takes advantage of LESS nesting capabilities:
.dashboard {
.title {
//styles here
}
}
We really like the second approach as it makes LESS stylesheets easy to read by collapsing rules specific to any particular element and it also allows for short style names. However, it has a problem, which is cascading - in the case at hand styles defined for .title inside .dashboard will also be applied for .title inside .custom-widget. If we use the first approach the doesn't happen.
Please advice on ways to use LESS nesting capabilities but avoid the problem described.
EDIT:
It seems that I've found a solution which combines two approaches:
.custom-widget {
&__save-icon {
&--active {
padding: 777px;
background-image : url('');
}
}
}
Produces this kind of class:
.custom-widget__save-icon--active

Answer 1

Just choose your element by selector like below:
This style affects only for immediate children of a .dashboard element which have class .title.
.dashboard > .title {
//styles here
}

Answer 2

I think the question is a bit ambiguous because there is no »do it that way« answer possible. BUT some reasoning will hopefully give some hints. I think the first question you should pose yourself is: will a span.title happen to appear in other places too, so that the style rules for it can be reused.
In this case you could start out by abstracting the style definitions like that:
html:
<div class="plugin dashboard">
<span class="title">Hey There!</span>
</div>
scss:
//general rules for each title in each plugin
div.plugin {
span.title {
}
}
//override or specify
div.dashboard {
span.title {
}
}
This way, by adding a second class you can take advantage of cascading nature of CSS and with tools like LESS or SASS you can guarantee that the order of style rules will be preserved.
Otherwise, if you just want to make sure that your style rules only apply for elements inside the .plugin__container, just scope it as you did in the question and take care that the outermost »main entry point« is unique enough.
div.plugin-namespace {
//all your rules here…
}
I hope It helped! Good Luck!