Как позиционировать элементы не создавая путаницы в коде?

Question

[Андрей Зернов]

Когда верстаешь многостраничник, появляется куча классов p, заголовков и прочих текстовых тегов, отличающихся по сути лишь line-height, вертиакальными padding и margin. Потому что где то один отступ, где то другой.. В итоге через некоторое время образуется каша в коде, приходится постоянно переопределять стили для новых тегов.
например:

.wrapper{
p{...}
.booking{
p{...}
p.center_bl{...}
}
.food_menu{
p{...}
}
}

Как избежать этого гемора и упорядочить код? Может как то можно не привязывать отступы к тегам, а использовать пустые div у которых единственное свойство - margin-top? Надеюсь, вопрос понятен.

Answer 1

[iBird Rose]

не используй обращение к тегам в css. обращайся только по классу. задавай нужные отступы в классах и присваивай их своим < p >
p.s. а вообще почитай на досуге https://ru.bem.info/

Comments

[Андрей Зернов]

тогда переопределять не придется стили, это верно. но будет множится количество классов. это нормально? хотелось бы какой то большей универсальности и лаконичности.

[Сергей Горячев]

Андрей Зернов: Множество классов - это нормально. Особенно, если в дальнейшем кому-то придется разобраться в ваших .article>div>p (это и есть путаница). Плюс к БЭМ - препроцессоры, которые помогут добиться минимального нагромождения кода в рабочем коде. Выходной файл - минифицирован и оптимизирован.

[Сергей Горячев]

Андрей Зернов: Да и сами попробуйте через год посмотреть свой же код, не по БЭМ, придется долго разбираться, какой p переопределяли другим %)

[Андрей Зернов]

Sergey Goryachev: ок, буду юзать БЭМ. препроцессоры использую. но они эту проблему не решают. одни из онлайн курсов которые я смотрел, пропагадировали эту сложную вложенность как добродетель. типо много лишних классов - зло. и если можно без них, лучше без них. вот это в свое время отложилось в памяти. ну а препроцессоры позволили делать эту вложенность без проблем. и понеслось...

[Сергей Горячев]

Андрей Зернов: Тут галвное четко понимать одну истину. Да, БЭМ - это лишний код. Но БЭМ - это НЕ ненужный код.

Answer 2

[Андрей Токмаков]

А зачем такая сложная вложенность?
Чем не устраивает хотя бы просто:

p {
color: #000;
font-size: 14px; 
// и т.д.
}
.one {
   padding: 0;
   margin: 0;
   line-height: 1;
}
.two {
   padding: 10px 0;
   margin: 10px;
   line-height: .5;
}
// и т.д.

тегу p указываешь все что одинаковое, классам все что разное и классы присваиваешь какие надо на нужных страницах.
Или я не правильно понял вопрос!?

Comments

[Андрей Зернов]

Правильно поняли. Нужно попробовать, спасибо! Обычно просто вижу p - вываливаю на него все свойства. вижу второй p - пишу для него отличия от первого и так потом как снежный ком получается.

[Андрей Токмаков]

я бы даже сказал снежный некрасивый ком

[Андрей Токмаков]

Андрей Зернов: я вот только не понимаю зачем таким тегам такая разница

[Андрей Токмаков]

А еще попробуйте посмотреть в сторону LESS/SASS

[Андрей Зернов]

Андрей Токмаков: я использую sass. из за него и получается сложная вложенность :)

[Ankhena]

Андрей Зернов: Я бы поговорила с дизайнером на тему разных отступов у <p>. Может быть они все таки имеют зависимость, например и даже скорее всего, от размера шрифта и можно писать 1.3em, а не переопределять каждый раз? Или это на самом деле отступы у родительского блока, которые можно задать в %.

Если дизайнер делает отступы вообще от балды, то либо вразумить его либо поменять на другого.

А в целом, поддержу iBird Rose

[Андрей Зернов]

Ankhena W: к сожалению с дизайнером приходится общаться через третьих лиц. это не штатный дизайнер. ну да, хотелось бы заранее иметь от нее такую инфу. в следующий раз сразу спрошу