Ul li, отступы вложения, для каждого уровня приходиться дописывать стиль, как этого не делать?

Question

[Антон Вебсайтовский]

Всем привет.
Прям не знаю как правильно задать вопрос темы, там длинный текст нельзя писать.

Суть такая, есть у нас каталог с уровнями.
Чтобы для каждого уровня глубины сделать отступ, приходиться в css дописывать стили и добавлять ul li, ну и выходит такая мазайка: li ul li ul li ul li ul li.

<ul class="usp">
  <li><a title="">1 Услуга апапавпав <b><strong>1000</strong> руб</b></a>
    <ul>
      <li><a title="">2 Услуга апапавпав</a>
        <ul>
          <li><a title="">3 Услуга апапавпав</a>
            <ul>
              <li><a title="">4 Услуга апапавпав</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 li a b 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;
}

Как сделать так чтобы не приходилось для каждого уровня дописывать в css ul li ?

Comments

[sergski]

почему не присвоите классы?

[mdss]

по всей видимости есть сброс отступа для ненумерованных списков. Необходимо их вернуть:

.usp ul {
  padding-left: 2.5em;
  margin-left: 1em;
}

[Антон Вебсайтовский]

sergski, а зачем классы, если и так работает, все ок.
Если подумать что длиннее будет класс или стиль.

.usp li ul li ul li ul li a{
  padding-left: 55px;
}

.usp2{
padding-left: 55px;
}

Ну да, класс короче будет.
Но я не об этом, как-то можно по другому сделать.

[Антон Вебсайтовский]

mdss, нет все ок.

Answer 1

[Арсений Матыцин]

Не обнулять отступы и стили.

Comments

[Антон Вебсайтовский]

не совсем понял.

[Арсений Матыцин]

В проекте использовано что-то в духе normalize.css или reset.css, либо правило в духе

*{
    padding: 0;
    margin: 0;
}

Что является ошибочным решением и в лучшем случае костылем для новичка, либо в проектах с плохой проработкой (нет времени\достаточного финансирования\просто рукожоп). Так как порождают переопределения и подобные проблемы.
Отказаться от этого легкого пути также сложно, как от курения, но можно.

[Антон Вебсайтовский]

Арсений Матыцин, чет ответ не по теме )

[Павел Клешнин]

Антон Вебсайтовский, отнюдь, это самый лучший ответ на ваш вопрос. Если всё ещё непонятно.

[Арсений Матыцин]

Павел Клешнин, достаю архивную шляпу, чтобы перед вами ее снять.

[Антон Вебсайтовский]

Арсений Матыцин, normalize или reset, есть, оно убирает стандартные отступы, то есть у функции ul - li, есть стандартный метод отступов, и само определяет вложение и делает отступы я так понимаю.

У стандартного метода отступы сильно большие. (вот что плохо).

Ох я даж и не знал )
Просто не везде порой нужны дефолтные отступы, я так понимаю это наслудется браузером и в каждом браузер по разному выглядит.

[Арсений Матыцин]

Антон Вебсайтовский,
1. Не обнулять нативные.
2. Указать для класса-родителя новые правила.

Это методология БЭМ, помноженная на модульность и здравый разум.

К слову, в верстке очень много подобных «приколов» и мифов. Увы.

[Антон Вебсайтовский]

Арсений Матыцин, ну мне номализаторы не мешают, они рераюти всякие нюансы, у нас же не один браузер, а разные.

Answer 2

[Антон Усачев]

padding добавляется к a, что является неправильным подходом: браузер не видит вложенности в данном случае. Лучшим решением будет убрать padding у a и переставить его на вложенные ul. Например, так:

ul.usp {
	padding: 0;
	
	ul {
		padding-left: 20px;
	}
}

Comments

[Антон Вебсайтовский]

можно и так и так, разницы нет, вложения работают.
вопрос был не про это.