Правила хорошего тона в вёрстке?

Question

[DrunkMaster]

Есть много мелких вопросов типа:

1. В каких случаях имеет смысл писать текст прямо в div
<div class="comments">Комментарии</div>
А в каких оборачивать в p или span

<div class="comments">
    <p>Комментарии <span class="num">(11)<span></p>
</div>

2. span можно задать как block но ведь есть же div но им говорят не злоупотреблять, когда лучше, обосновано span block а когда div?

3. Постоянно сталкиваюсь с конструкциями вида:

#block{

}

#block a{
    
}

Вроде всё правильно но чем дольше работаю тем больше кажется что это антипаттерн какой-то потому что по ходу работы надо проектом часто возникает необходимость иметь в блоке 2 и более ссылок по-разному оформленных.

И т.п....где об этом можно почитать?

Answer 1

[Олег]

Тут

Comments

[lufasab]

Гавно.

[DrunkMaster]

lufasab: мы ждём ваших предложений ))

[lufasab]

DrunkMaster: да мне самому интересны правила хорошего тона в верстке, только БЭМ к этому никакого отношения не имеет.

[Олег]

lufasab: Гавно не гавно, а проблемы, которые волнуют автора вопроса решает полностью.

[lufasab]

Олег: БЭм это неужный костыль в эпоху компонентов. Он никак не решает вопрос автора "В каких случаях имеет смысл писать текст прямо в div, А в каких оборачивать в p или span"

[Сергей delphinpro]

lufasab: Эпоху компонентов? Вы к нам из будущего заглянули что ли?

[lufasab]

Сергей: нет, я использую Реакт и Вью, и все абсолютно в компонентах, мне не нужны эти прибэмнутые простыни классов по умолчанию. Советую расширить, наконец, кругозор.

[Олег]

lufasab: А если мне не нужен реакт или вью на проекте?

[lufasab]

Олег: а если ТСу не нужен ваш *** БЭМ на проекте?

[lufasab]

Серьезно, я пытался верстать по БЭМу когда-то. У меня на дрочилово с придумыванием, упорядочиванием и написанием этих свитков классов уходило больше времени, чем на версту. Конечно, я допускаю мысль что я делал что-то неправильно или у меня просто личная аллергия на эту методику.

[Сергей delphinpro]

lufasab: Ну я тоже пишу на реакте. И мне категорически не нравится идея инлайн-стилей. А если их выносить во внешний файл, то возвращаемся к той же проблеме глобальной видимости в css. Да, есть конечно, приблуды, которые генерят рандомные классы, но годятся они только для SPA и по сути тоже являются костылями. Если бы всё было так просто, как вам кажется...

[lufasab]

Более того, я смею утверждать, что сам по себе БЭМ ломает мышление, это больше подходит для наемных сотрудников где-то в крупных компаниях (в реалье же, это пару околояндексных контор - все)

[lufasab]

Сергей: если не нравится идея инлайн стилей, попробуй vue компоненты, с их style scoped

[lufasab]

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

[Сергей delphinpro]

lufasab: а я и не говорю, что они не работают =) работают, использую, я использую. но это же не панацея на все случаи жизни. Далеко не на все.
Что касается стандартов, тут и так всё очевидно - ждем поддержку web-components, настоящих компонентов.

Answer 2

[Алексей Скляров]

Про БЭМ уже сказали, а про спан и див коротко: должны быть общее определение всяких дивов и спанов, т.е если я буду читать ваш код и увижу span, я пойму что это строчный элемент, мне будет странно, если он окажется блочным.

Обычно (лично я) беру текст в спан, чтобы придать ему отличительные черты, от другого такого же текста. Например, перекрасить в другой цвет или увеличить размер.

Про ваш тег p, лично я любой текст, который вложен в статью или блок с текстом, всегда обозначаю через этот тег. Выделил это для того, чтоб не было желания писать следующее: Текст

По третьему пункту: это нормальная вложенность, если я собираюсь использовать конкретный стиль для ссылок, например в меню, я делаю эти стили вложенные в стили меню. Если же нет - выношу стили, чтобы их можно было применять везде.

Если вам нужно чтобы каждая ссылка в меню была по-разному оформлена, то все равно все так же и будет записываться, с небольшой корректировкой:

#block{

}

#block a{
    
}
#block a:first-of-type {
}
#block a:nth-of-type(2) {
}

Comments

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

#block a:first-of-type {
}
#block a:nth-of-type(2) {
}
честно, ужас)

[DrunkMaster]

Sergey Goryachev: соглашусь )

[Алексей Скляров]

Sergey Goryachev: не спорю, вариантов решения такой задачи несколько, привел тот, что первее в голову пришел

Answer 3

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

Вроде всё правильно но чем дольше работаю тем больше кажется что это антипаттерн какой-то потому что по ходу работы надо проектом часто возникает необходимость иметь в блоке 2 и более ссылок по-разному оформленных.

БЭМ же, епть)

Comments

[lufasab]

Налетели прибэмнутые. Ща насоветуют)))