Качеству разметки и css

@Galiof_irk · Регистрация: 16.02.2015

Студворк — интернет-сервис помощи студентам

Добрый день форумчане!

Подскажите правильный подход к реализации такой структуры: есть лендинг разбитый по секциям. Бэкграунд у секций идет на всю ширину экрана, в то время как контент размещается по центру и занимает 1120px. Для примера возьмем верхнюю линию, в которой должны быть язык, телефон и email.

В html у меня это выглядит так:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
    <header class="header">
    <div class="header__top-line">
        <div class="container">
            <div class="header__top-line-inner">
                <div class="header__top-line-lang">
                    <a href="#" class="active">Рус</a>
                    <a href="#">Eng</a>
                    <a href="#">Fr</a>
                </div>
                <div class="header__top-line-phone">
                    <div class="top-phone">
                        <a href="#">+7 (3952) 666-666</a>
                    </div>
                </div>
                <div class="header__top-line-phone">
                        <div class="top-email">
                                <a href="#">sales@log.ru</a>
                            </div>
                </div>  
            </div>
        </div>
    </div>
    </header>

sass для этого блока такой:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
body
    margin: 0
    padding: 0
    font-family: OpenSans, sans-serif
a
    color: white
    text-decoration: none
.container
    width: 1120px
    margin: 0 auto
.header__top-line
    height: 45px
    background: #C8A35F
.header__top-line-inner
    display: flex
    justify-content: space-between
    align-content: center
    height: 45px
    *
        display: flex
        height: 45px
        align-items: center
    .header__top-line-lang
        a
            opacity: 0.5
            margin-right: 20px
            text-decoration: none
        a.active
            opacity: 1

Есть несколько вопросов:
1. Нейминг. У меня есть класс .container который задает ширину контента. С точки зрения бэм или других методологий нормально что в каждом блоке будет присутствовать элемент с классом имя которого никак не сопоставляется с родительским?
2. Стили. Мне надо чтобы в .top-line все элементы и контент в них выравнивался во центру(по вертикали). Можете видеть как я это реализовал. Правильный ли это подход, или есть более верные решения задачи?
3. Ну и вообще дайте пожалуйста кодревью. Как улучшить подход? А то работаю один, и не с кем посоветоваться.

Заранее спасибо!

@voral · 12.06.2019, 12:30

1. В sass есть &

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
body
    margin: 0
    padding: 0
    font-family: OpenSans, sans-serif
a
    color: white
    text-decoration: none
.container
    width: 1120px
    margin: 0 auto
.header
    &__top-line
        height: 45px
        background: #C8A35F
    &__top-line-lang
        a
            opacity: 0.5
            margin-right: 20px
            text-decoration: none
            &.active
                  opacity: 1
    &__top-line-inner
        display: flex
        justify-content: space-between
        align-content: center
        height: 45px
        *
            display: flex
            height: 45px
            align-items: center

Вы уже выбирайте конкретную методику... И тогда будет иметь смысл думать соответствует или нет.
В данном случае у вас достаточно много нарушений БЭМ (раз уж вы ее упомянули)

* - не стоит ей злоупотреблять. Методика БЭМ как раз нацелена, чтобы максимально ускорить разбор/применение стилей. А вы берете самый жадный селектор. Не говоря уж о том, что делать display flex для всех элементов внутри.....
flex - штука удобная, но злоупотреблять не стоит.

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

То, что "будет присутствовать элемент с классом имя которого никак не сопоставляется с родительским". Это нормально во всех случаях когда элемент самостоятелен и не подразумевает обязательной вложенности в другой.

@Fedor92 · 12.06.2019, 12:57

Сообщение от Galiof_irk

Ну и вообще дайте пожалуйста кодревью. Как улучшить подход? А то работаю один, и не с кем посоветоваться.

Стоит попробовать свои силы в команде...

Сообщение от voral

* - не стоит ей злоупотреблять.

Почему?

@voral · 12.06.2019, 13:24

Сообщение от Fedor92

Почему?

Потому, что медленно. Ясно дело что не в минутах дело.... (поискали .header__top-line-inner - в нем пошли по всем элементам) Но тем не менее... И тут, конечно, дело конкретной задачи. Но на мой личный взгляд, использование таких "глобальных" селекторов должно быть обдуманным.... Не говоря уж, если есть желание соответствовать тому же БЭМ...

Далее в общем случае все же лучше когда стили более конкретны. Через год потребуется добавить элемент, которому этот flex и высота только мешает. Будем переназначать, еще через год следующий...
(У меня просто свежи еще воспоминания, где как раз вот этот flex навтыкали с надобностью и без, и на пустом месте лишняя работа нарисовалась)...

@Galiof_irk · 12.06.2019, 13:27 **[ТС]**

Спасибо за ответ, по поводу & не знал!
По поводу злоупотребления flex - почему не стоит злоупотреблять? Если у нас внутри блока все элементы должны свой контент выравнивать по одинаковым правилам, в чем проблема применить для них для всех flex? Думаю это лучше чем в одних местах мы будем давать flex, в других выравнивать другими способами... сейчас пришла мысль что для всех элементов с flex могу задать отдельный класс для которого будет задано display: flex. Это уберет дублирование кода.

@voral · 12.06.2019, 13:38

flex, опять же на мой взгляд, хорош там где есть одна колонка или строка, а где два измерения лучше grid. А где то вообще не нужен ни тот ни другой. Т.е. если я вставлю свой компонент в ваш. (при этом в моем компоненте будет несколько уровней вложенности, да и, точнее, несколько разных классов/элементов), то мне придется для каждого переопределять ваши настройки. Хотя, по хорошему, я должен только верхний элемент "встроить" в вашем компоненте, чтоб он там не был инородным. А вложенные то по что?

Добавлено через 1 минуту

Сообщение от Galiof_irk

По поводу злоупотребления flex

Да, и "злоупотребление". Было больше не по поводу flex как такового. А использование селектора "*".... В моем компоненте, который я вставлю внутрь вашего, высота не нужна такая (он у меня может будет в две строки)....

Добавлено через 3 минуты
Т.е. суть на мой взгляд в следующем.

Мы ж не хотим ориентироваться на детские проектики ни кому не нужные

... Только на мега проекты с миллионными посещениями и командой разрабов.... Куча компонентов на странице. Вы делаете компоенент контейнер, и описываете общие правила проживания в нем.... Я делаю маленький компонент, который вставляется в него и по минимум просто адптиурется верхним слоем. (либо при помощи модификатора, либо просто полопав в отведенный для него блок).. Но ваш кмопоент не должен (опять же на мой взгляд) ломать мой.

@Fedor92 · 12.06.2019, 13:51

Сообщение от voral

Потому, что медленно.

Да ну, бред. Это несерьёзно...

Сообщение от voral

Не говоря уж, если есть желание соответствовать тому же БЭМ...

А причём здесь вообще БЭМ?

Сообщение от voral

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

Вы себя со стороны слышите? Как взаимосвязана интеграция Вашего элемента с уже существующей вёрсткой? За примером далеко ходить не надо. Допустим перед Вами стоит задача компонент, написанный на bootstrap 3 интегрировать в вёрстку на bootstrap4... Как Вы не переставляйте слагаемые, Вам придётся переделывать стили и зачем вообще плясать так с бубном? БЭМ предлагает определённое именование классов и только потом создание стилей, исходя из именования классов.

@voral · 12.06.2019, 14:04

Сообщение от Fedor92

А причём здесь вообще БЭМ?

Было в начальном вопросе.

Сообщение от Fedor92

Вы себя со стороны слышите? Как взаимосвязана интеграция Вашего элемента с уже существующей вёрсткой? За примером далеко ходить не надо. Допустим перед Вами стоит задача компонент, написанный на bootstrap 3 интегрировать в вёрстку на bootstrap4... Как Вы не переставляйте слагаемые, Вам придётся переделывать стили и зачем вообще плясать так с бубном? БЭМ предлагает определённое именование классов и только потом создание стилей, исходя из именования классов

Я несколько иначе воспринмаю БЭМ. (И я так понимаю, это понимание соответствут и описанию Яндекса). Т.е. это модульность. Понятно если человек исключительно верстальщик и ему не интересно, как это все будет жить дальше то да...
А если идти дальше, то ведь однажды СЕОшник захочет сказать, а теперь я хочу чтобы блок из подвала пехал в шапку. Даже точнее был скопирован....

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

Ну а про бутстрап..... Ну если только на него ориентроваться то да.... Наверное.. У меня он встречается только на низкобюджетных проектах. Я сомневаюсь что там вообще надо тащить всякие БЭМЫ уж бутсрап так бутстрап....

PS Не навязываю мнение, но меня не переубедить. Воспитан на программировании во времена, когда операционка, компилятор и ИДЕ. умещались на дискету в 360кб...

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

@Fedor92 · 12.06.2019, 14:41

Сообщение от voral

Т.е. это модульность.

Совершенно верно... Это модульность, которая не должна наследоваться... В это вся и фишка заключается...

Неправота автора темы заключается вот в таком именовании класса header__top-line-inner... Методология БЭМ подразумевает следующее:

CSS
1
2
3
4
5
6
7
.header{}
.header .block-lang{...}
.header .block-lang .block-lang__list{...}
.header .block-phone{...} 
.header .block-phone .block-phone__link{...}
.header .block-email{...}
.header .block-email .block-email__link{...}

Если Вам необходимо по просьбе сеошника переставить блоки в footer, то для стилей меняете лишь первый класс и получаете на выходе:

CSS
1
2
3
4
5
6
7
.footer{}
.footer .block-lang{...}
.footer .block-lang .block-lang__list{...}
.footer .block-phone{...} 
.footer .block-phone .block-phone__link{...}
.footer .block-email{...}
.footer .block-email .block-email__link{...}

Вот Вам модульный БЭМ в действии...

И собственно в чём проблема? Использование универсального слектора, лишь упрощает запись и сокращает количество стилей, то есть если мs используем flex-вёртку, зачем для каждого вложенного блока указывать display:flex? Если можем указать одним махом для всех .header *{...} Или БЭМ запрещает использование универсальных селекторов?

Сообщение от voral

Понятно если человек исключительно верстальщик и ему не интересно, как это все будет жить дальше то да...

Так БЭМ изначально на верстальщиков и рассчитан...

Сообщение от voral

У меня он встречается только на низкобюджетных проектах. Я сомневаюсь что там вообще надо тащить всякие БЭМЫ уж бутсрап так бутстрап....

А Вы различаете низкобюджетные проекты и выскомаржинальные?

Ужас... Тихий ужас... То есть типа нищебродам итак сойдёт, а перед богачами можно и на цырлах попрыгать... Если что, то в бутстрап вёрсткая атомарная и её можно использовать вместе с БЭМ вне зависимости от стоимости проекта... И уж тем, более опять же на мой взгляд вне зависимости от того сколько платит клиент есть смысл качать скилы одинаково вне зависимости от стоимости проекта. Но это лишь моё мнение, я не капиталист и не терплю менеджеров...))

Сообщение от voral

Воспитан на программировании во времена, когда операционка, компилятор и ИДЕ. умещались на дискету в 360кб...

А вот это уже подозрительно...

Что-то не припомню IDE на дискете, если только MC и блокнот...)) Операционка, если только соляра влезала...

@voral · 12.06.2019, 15:14

Сообщение от Fedor92

Вот Вам модульный БЭМ в действии.

Хм... Ну я все же иначе трактую. Т.е. не надо использовать вложенные стили.
Т.е. в идеале стиль block-lang и ему добавляем модификатор, если он в header. Все же БЭМ несколько больше чем правило именования стилей.

Сообщение от Fedor92

Так БЭМ изначально на верстальщиков и рассчитан.

Верстка без продолжения ни кому нафиг не сдалась

Сообщение от Fedor92

А Вы различаете низкобюджетные проекты и выскомаржинальные?

Не надо передергивать. В одном проекте бюджет позволяет более детально подойти к верстке и не тащить тонну ненужных зависимостей и стилей, в доугом воткнул бутстрап и просто используешь стили. Кроме того во многих CMS тот же бутстрап в коробке. Воткнул компонент и он работает. Где большой бюджет, там запросы другие. Они скажут нам не надо как у всех.

Где вы увидели, что качество разное? Просто я считаю, что бутстрап не панацея, не всегда удобен, но у меня, например, тариф почасовой, естественно на бутстрапе, тем более типовой - верстка будет быстрее. Она не будет менее качественной, просто на дизайн, врестку будут "наложены требования бутстрап". Это не всегда оптимально... Если клиент готов платить, чтоб было совсем под него почему нет?

Сообщение от Fedor92

Что-то не припомню IDE на дискете

Ну значит вы не застали. Погуглите MSDOS 3. , Turbo C++, Turbo Pascal, Turbo Basic.... (Естественно речь не о верстке)

Добавлено через 2 минуты
Кстати в лине IDE для Pascal (в консоли конечно же) до сих пор в том "дизайне". И ее используют в некоторых школах...

@Fedor92 · 12.06.2019, 15:32

Сообщение от voral

Ну я все же иначе трактую.

Вот так мы и подобрались к сути... Именно в этом и заключается корень зла ведь каждый трактует БЭМ по своему и назначение БЭМ тоже - хотя по сути документация единая и вроде бы не двусмысленная... К слову, я раньше примерно также трактовал, пока дело не дошло до реального проекта, там где блоки переставлялись в различном порядке... Здесь основная ошибка заключается именно в том, что многие неистово стараются вложенные блоки привязать к определённой области на сайте, посредством модификатора или наследования части класса - этого делать не нужно. Самая частая и распространённая ошибка... Поэтому потом и возникнут проблемы с переносом блока...

Сообщение от voral

Верстка без продолжения ни кому нафиг не сдалась

А причём тут предложение? Мы вроде как говорили, о том кто может использовать в работе БЭМ, а ни кто получит за неё деньги. Или я потерял где-то логическую нить?

Сообщение от voral

Не надо передергивать

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

Сообщение от voral

Где вы увидели, что качество разное?

А разве нет? Сайт ручной работы и сайт сделанный на бюджетном фреймворке...

Эксклюзив и так сказать ширпотреб...

Сообщение от voral

Ну значит вы не застали. Погуглите MSDOS 3. , Turbo C++, Turbo Pascal, Turbo Basic.... (Естественно речь не о верстке)

Зачем мне гуглить...?

У меня и по сей день где-то болтается заветная дискетка. Просто мы на ветке вёрстки, говорим о вёрстке - я думал, что Вы и говорите про вёрстку... Поэтому по памяти и начал вспоминать счастливые 90-е... Паскаль мой второй язык после асма... Я ж не знал, что Вы имеете ввиду, поэтому и подумал об IDE для веб-разработчиков...

@voral · 12.06.2019, 16:03

Сообщение от Fedor92

Здесь основная ошибка заключается именно в том, что многие неистово стараются вложенные блоки привязать к определённой области на сайте, посредством модификатора или наследования части класса - этого делать не нужно. Самая частая и распространённая ошибка... Поэтому потом и возникнут проблемы с переносом блока...

Ну если до конца быть честным, то тут я тоже пока в стадии раздумий. И на самом деле мне тоже больше нравится идея вложенности. Т.е. все же ".header .block-lang", но пока не могу для себя однозначно ответить что лучше... Но!

Тут у меня есть два аргумента. Если мы копируем блок в другое место:
1. Если в другом месте он должен выглядеть точно также. То нам не нужны ни какие модификаторы. Утрировано, может быть, он должен просто занимать отводимое для него место/контейнер. А контейнеру - ему все равно что внутри. Он просто задал "рамки".

2. Если отличия должны быть... Тут если иерархию прописывать - все равно нужно вмешательство верстальщика/разработчика (в общем кто в css внесет правки). Точно с таким же успехом можно просто класс миодификатор добавить. При этом как разработчик, я могу вынести это в настройки компонента. И контент менеджер сам справится. (естественно в случае готовых наборов).

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

Сообщение от Fedor92

А причём тут предложение? Мы вроде как говорили, о том кто может использовать в работе БЭМ, а ни кто получит за неё деньги. Или я потерял где-то логическую нить

Я тут больше к "конфликтам" на стыке зон ответственности. Когда в вебе занимался только версткой, я с опытом готов был целую книгу написать как руководство к дизайнерам, потому как слишком многие, оформляют макеты так, как будто макет это сама цель и конечная задача всего проекта... Сейчас я готов накатать обращение к верстальщикам

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

... Мне как раз и понравился БЭМ в том понимании как я его понял (я не сторонник слепому следованию какому либо правилу просто потому, что, например, в этом случае это "великий Яндекс"

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

Сообщение от Fedor92

А разве нет? Сайт ручной работы и сайт сделанный на бюджетном фреймворке... Эксклюзив и так сказать ширпотреб...

Ну "ширпореб" не означет низкое качество. Применение фреймоворков позволяет снизить время разработки, но не за счет качества (а зачастую не каждый сможет сделать лучше чем в популярном фреймворке), а за счет как их то уступок/ограничений... И тут "ни чего личного - просто бизнес". Я работаю чтоб зарабтывать, а свободное время предпочитаю тратить например на свои проекты и развлечения. Тут на мой взгляд на любом проекте, включая с большим бюджетом, надо принимать решение индивидуальное, возможно и на дорогущем применение бутсрапа (или других готовых аналогов) очень даже оправдано.

Добавлено через 5 минут

Сообщение от Fedor92

Я ж не знал, что Вы имеете ввиду, поэтому и подумал об IDE для веб-разработчиков

Мне кажется для веба вообще они уже только с появлением винды 95 где то появились.... Я даже каким то пользовался - название вспомнить не могу... Был дрим вивер, но он рожал тонны мусора и еще какойто, который достатчоно чистенький html выдавал...

Но это не точно. По "нормальному" вебом стал заниматься уже во времена XP. И мой "ИДЕ" был первое время Kate и vim. А дисководы гоняли толкьо в налоговой. да и те уже были 3.5 дюйма

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11680&d=1772460536 Одним из. . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .

@Galiof_irk 1 / 1 / 0 Регистрация: 16.02.2015 Сообщений: 38
	12.06.2019, 13:27 [ТС]
	Спасибо за ответ, по поводу & не знал! По поводу злоупотребления flex - почему не стоит злоупотреблять? Если у нас внутри блока все элементы должны свой контент выравнивать по одинаковым правилам, в чем проблема применить для них для всех flex? Думаю это лучше чем в одних местах мы будем давать flex, в других выравнивать другими способами... сейчас пришла мысль что для всех элементов с flex могу задать отдельный класс для которого будет задано display: flex. Это уберет дублирование кода. 0