Ul li, indentation of the attachment for each level you have to finish a style as not to do it?

Hi all.
Don't know how to ask a question topic, there's a long text to write.

Here's the thing, we have a directory levels.
For each depth level to indent, you have to add in css styles and add ul li, well, so the mosaic: li ul li ul li ul li ul li.

<ul class="usp">
 the <li><a title="">1 Service appita <b><strong>1000</strong> RUB</b></a>
the <ul>
 the <li><a title="">2 Service appoval</a>
the <ul>
 the <li><a title="">3 Service appoval</a>
the <ul>
 the <li><a title="">4 Service appoval</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>


css
.usp li {
 color: #000;
 font-weight: 600;
}
.usp li a {
 cursor: default;
 padding: 15px 20px 15px 20px;
 position: relative;
 display: block;
 border: 1px solid #EEEEEE;
 margin-bottom: -1px;
}
.usp li a b{
 font-weight: 400;
 float: right;
}
.usp a b li strong{
font-size: 16px;
 color: #FF2525;
}
.usp li ul li a{
padding-left: 35px;
}
.usp li ul li ul li a{
 padding-left: 45px;
}
.usp li ul li ul li ul li a{
 padding-left: 55px;
}
.usp li ul li ul li ul li ul li a{
 padding-left: 65px;
}


How to make so that to each level to add css in ul li ?
April 7th 20 at 15:38
3 answers
April 7th 20 at 15:40
Solution
Not to reset the indents and styles.
I do not quite understand. - waino.Kilba commented on April 7th 20 at 15:43
The project uses something in the spirit of normalize.css or reset.css, or rule in the spirit
*{
 padding: 0;
 margin: 0;
}

That is a wrong decision and at best a crutch for the beginner, or projects with poor processing (no time\sufficient funding\just pictures). As generate overrides and similar problems.
To unsubscribe from this easy way is also difficult as Smoking, but it is possible. - Molly_Halvorson commented on April 7th 20 at 15:46
@fleta.Jacobi, Chet topic ) - waino.Kilba commented on April 7th 20 at 15:49
@maribel.Naddid is the best answer to your question. If still unclear. - Simone.Emard81 commented on April 7th 20 at 15:52
@Graham.Hermiston, get a backup hat, so before you take it off. - Molly_Halvorson commented on April 7th 20 at 15:55
@fleta.Jacobi, normalize or reset, is that it removes the default padding, that is, the functions of ul - li, there is a standard method of indentation, and to determine the attachment and makes indentation I understand.

The standard method of indentation is too big. (that's bad).

Oh I sales didn't )
Just not everywhere sometimes need a default indentation, as I understand it nasladitsa browser and in each browser it looks different. - waino.Kilba commented on April 7th 20 at 15:58
@maribel.Nad,
1. Not to reset native.
2. Specify the parent class to the new rules.

This is the BEM methodology, coupled with modularity and common sense.

By the way, the layout very much like "fun" and myths. Alas. - Molly_Halvorson commented on April 7th 20 at 16:01
@fleta.Jacobi, well, I normalizator do not interfere, they are reroute all sorts of nuances, we're not in one browser, and different. - waino.Kilba commented on April 7th 20 at 16:04
April 7th 20 at 15:42
Solution
@maribel.Nad,

and what classes, if it works, everything is OK.
If you think that will be a long class or style.


Then what do you expect to hear, if you so think?

li ul li ul li ul li ul li


Personally, I see such nesting is ugly and unreliable. Using classes is much better, even the markup will be more, but is safer.

That's probably be better:

<div class="list-of-services">
<ul class="first-level">
<li class="first-level__item"><a class="first-level__link">Service</a>
<ul class="second-level">
<li class="second-level__item"><a class="second-level__link">Service</a>
<ul class="third-level">
<li class="third-level__item"><a class="third-level__link">Service</a>
<ul class="fourth-level">
<li class="fourth-level__item"><a class="fourth-level__link">Service</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>


And already using CSS to set styles to indent, and so on that need.
in fact the same that I came up with what you, the classes will be shorter ) if the course is still not to call so long as you did. - waino.Kilba commented on April 7th 20 at 15:45
@maribel.Nad, I don't like short names for classes. The fact that the example is very simple and short names that I could give. For me reliability is more important than beauty) and to save on matches as something unusual. Disposable layout somehow annoying... need to do so that you always have the opportunity to modify and improve. - Freeman.Muller9 commented on April 7th 20 at 15:48
@Alberto54, you can always add a couple of letters ! sense short to make the code smaller, search engines like to have more information, not code ). - waino.Kilba commented on April 7th 20 at 15:51
@xdevelx, it's not a myth, one of the ranking factors, but that's not the point, I suppose I love when code is smaller, when there is no excess, I'm here and asked about it. - waino.Kilba commented on April 7th 20 at 15:54
@xdevelx, why do you have a link you think your head, one of the very important factors of ranking website and search engines is the loading speed of your site, the less you have the code and css and div blocks etc, the better, in css you can do all sorts of kombinasi, glue if there is something similar etc, in the template for you to write long names of css and to make short and try not to put all sorts of extra wrapper div, and make possible ways without any extra. - waino.Kilba commented on April 7th 20 at 15:57
April 7th 20 at 15:44
Solution
padding is added to a, that is the wrong approach: the browser does not see the nesting in this case. The best solution is to remove padding from a and move it to the nested ul. For example:

ul.usp {
 padding: 0;

 ul {
 padding-left: 20px;
}
}
I could go either way, there is no difference, attachments work.
the question was not about that. - waino.Kilba commented on April 7th 20 at 15:47

Find more questions by tags CSS