Распространенные ошибки начинающего HTML-верстальщика

  • Tutorial

Привет, читатель! Я верстаю сайты с 2011 года. Как и большинство верстальщиков того времени, я учился самостоятельно по видео-урокам. За это время, я не раз ошибался с выбором позиционирования блока, выбором тега для элемента и конечно, с названием классов. В этой статье я хочу поделиться своими ошибками.


Я взял один из своих проектов, в котором мы вместе с вами рассмотрим ошибки и исправим их. Архив с примерами вы можете скачать здесь.


Верхняя панель с меню и поиском


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


<div class="header">
 <header id="header" class="wrapper">
  <div class="menu_block">
   <!-- menu -->
  </div>
  <div class="search_block">
   <!-- search -->
  </div>
 </header>
</div>

Первым, что бросается в глаза, смотря на нее, это использование элемента div с классом header и элемента header с идентификатором header. Я уверен, что 100% верстальщиков, взглянув на этот код, не поймут, где же действительно шапка. Поэтому, нужно переверстать элементы следующим образом:


<header id="header" class="header">
 <div class="wrapper">
  <div class="menu_block">
   <!-- menu -->
  </div>
  <div class="search_block">
   <!-- search -->
  </div>
 </div>
</header>

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


.header{..}
#header{...}
#header .search_block{...}

Я не знаю, в каком состоянии я находился, делая CSS-каскады с использованием класса header и идентификатора header, но как говорится, "Из песни слов не выкинешь". Мало того, что в данном случае создание двух CSS-каскадов бессмысленно, так и использование id в CSS лишает вас возможности переиспользовать CSS, а это в свою очередь, ведет к его дублированию. Поэтому, мы будем использовать только класс header. Изменю наш код следующим образом:


<header class="header">
 <div class="wrapper">
  <div class="menu_block">
   <!-- menu -->
  </div>
  <div class="search_block">
   <!-- search -->
  </div>
 </div>
</header>

.header{..}
.header .search_block{...}

Но, честно говоря, у меня большие сомнения, что это шапка сайта. Я больше склоняюсь к тому, что это верхняя панель. Поэтому, советую переименовать класс header в top-panel.


<div class="top-panel">
 <div class="wrapper">
  <div class="menu_block">
   <!-- menu -->
  </div>
  <div class="search_block">
   <!-- search -->
  </div>
 </div>
</div>

.top-panel{..}
.top-panel .search_block{...}

Верстка основного контейнера


Идем дальше по нашей структуре и встречаем div с классом wrapper:


<div class="top-panel">
 <div class="wrapper">
   <!-- menu and search -->
 </div>
</div>

И для полноты картины CSS:


.wrapper{
 margin: 0 auto;
 width: 940px;
 padding: 0 10px;
}

Слово wrapper можно перевести как обертка. Не совсем понятно что она оборачивает? Да и этот блок вообще не обертка. Так что с этим классом я погорячился.


Этот элемент служит для центрирования и указания ширины нашего сайта. По сути, это основной блок страницы, в который помещаются все остальные. Поэтому, логично было бы его назвать main-container.


<div class="top-panel">
 <div class="main-container">
   <!-- menu and search -->
 </div>
</div >

Меню


Теперь детальнее разберем меню, которое имеет следующую структуру:


<div class="menu_block">
 <ul class="menu">
  <li class="menu_item"><a href="#" class="item">Единый семинар</a></li>
  <li class="menu_item"><a href="#" class="item">О компании</a></li>
  <li class="menu_item"><a href="#" class="item">Вакансии</a></li>
  <li class="menu_item"><a href="#" class="item">Новости</a></li>
  <li class="menu_item"><a href="#" class="item">Акции</a></li>
  <li class="menu_item"><a href="#" class="item">Клиенты</a></li>
  <li class="menu_item"><a href="#" class="item">Контакты</a></li>
 </ul>
</div>

И следующий CSS:


.menu_block{...}
.menu{...}
.menu_item{...}
.item{...}
.item:hover{...}

Первым, что хочется спросить, смотря на этот код, это зачем происходит вложенность тега ul в div? Тег ul, как и тег div относятся к блочным элементам, поэтому в данном случае тег ul не требуется оборачивать тегом div.


<ul class="menu_block menu">
  <li class="menu_item"><a href="#" class="item">Единый семинар</a></li>
 ...
</ul>

Далее, у меня была очень вредная привычка добавлять к классам "пояснения" вроде _block, _list и т.п. Этот метод не помогает вашему коду быть прозрачнее. Это лишняя тавтология, которая бессмысленна и может легко сломаться. Поэтому, изменю код следующим образом:


<ul class="menu">
  <li class="menu_item"><a href="#" class="item">Единый семинар</a></li>
  ...
</ul>

.menu{...}
.menu_item{...}
.item{...}
.item:hover{...}

Далее, посмотрим на ссылку с классом item. Данное название класса очень обобщенное. Если бы через полгода меня спросили для чего я использую этот класс, то я бы не ответил. Я бы не ответил даже тогда, когда верстал этот макет, если бы не посмотрел в HTML. Запомните, что название классов должно отражать смысл элемента.


Теперь изменим код:


<ul class="menu">
 <li class="menu__item"><a href="#" class="menu__link">Единый семинар</a></li>
 ...
</ul>

.menu{...}
.menu__item{...}
.menu__link{...}
.menu__link:hover{...}

Вот теперь, если даже в 4 ночи позвонят мне и спросят зачем там класс menu__link, то я отвечу для стилизации ссылок в меню.


Поиск


Теперь рассмотрим поиск со следующей структурой:


<div class="search_block">
 <form class="search">
  <input type="text" class="search_field" placeholder="Поиск по сайту">
  <button type="submit" class="search_icon">
   <img src="http://images/search_icon.png" alt="иконка поиска">
  </button>
 </form>
</div>

Как видим, здесь, как и ранее, есть проявлении моей болезни тавтологии и лишней вложенности блочного элемента form в блочный div. Я надеюсь, что теперь вы знаете как решать такие проблемы, поэтому я оставлю это вам. Должны же вы потренироваться! Но если вы не хотите, ответ в следующем абзаце.


Кроме перечисленных выше ошибок, в этом фрагменте есть еще несколько. Первая, это не указан атрибут name для поля ввода.


Вторая, это название класса search_icon для кнопки поиска. Опять же, если меня спросят для чего служит этот элемент, то я снова не назову правильный ответ. Поэтому изменим класс на search__button.


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


Теперь изменим HTML.


 <form class="search">
  <input type="text" class="search__field" name="query" placeholder="Поиск по сайту">
  <button type="submit" class="search__button"></button>
 </form>

Вроде теперь все хорошо… Но, стоп! У нас теперь абсолютно пустая кнопка! Это очень плохой тон в верстке. Если у нас не загрузится CSS или пользователь будет посещать сайт с использование электронных читалок, то они просто ее не увидят или не услышат. Поэтому нам нужно добавить слово "Найти", которое мы скроем используя свойство text-indent.


 <form class="search">
  <input type="text" class="search__field" name="query" placeholder="Поиск по сайту">
  <button type="submit" class="search__button">Найти</button>
 </form>

Теперь перейдем к CSS.


.top-panel .search{...}
.top-panel .search .search_field{...}
.top-panel .search .search_field:focus{...}
.top-panel .search .search_button{...}

Как вы теперь видите, я указал всю цепочку вложенности в CSS-селекторе. Мне постоянно встречаются такие ошибки. Давайте рассмотрим подробнее эту ошибку.


Первое, мы привыкли с вами читать слева направо, и поэтому думаем, что браузер сначала найдет элемент с классом top-panel, а потом внутри него элемент с классом search. Но, на деле все наоборот! Браузеры читают CSS-селектор справа налево, поэтому, сначала он найдет элементы с классом search, а только потом у них отыщет предков с классом top-panel.


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


Но, это полбеды. Если вы верстаете мало мальски посещаемый сайт, то рано или поздно придется вносить изменения на нем. Допустим, требуется перенести блок поиска в другое место страницы. Например, в подвал. При текущей реализации потребуется изменить как HTML, так и CSS. Это все потому, что указана жесткая вложенность элементов. Вы вынуждены будете продублировать CSS-свойства.


Для решения этой проблемы нам нужно изменить CSS следующим образом:


.search{...}
.search__field{...}
.search__field:focus{...}
.search__button{...}

Все просто! Теперь мы можем перемещать поиск, поле поиска и даже кнопку куда захотим.


Позиционирование меню и поиска


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


.top-panel{
 background-color: #ededed;
 min-width: 960px;
 height: 40px;
}
.menu{
 float: left;
}
.search{
 float: right;
}

В чем же здесь ошибка? Из-за того что у элемента с классом top-panel задана высота в 40 пикселей, блоки выглядят как надо. Но, если мы проинспектируем элемент с классом main-container при помощи веб-инспектора, то увидим, что его высота равняется нулю. Это побочный эффект при использовании float-элементов. Что можно сделать с этим? По логике начинающего верстальщика, надо просто задать высоту. И таким образом появится что-то вроде этого:


.top-panel{
 background-color: #ededed;
 min-width: 960px;
}
.top-panel .main-container{
 height: 40px;
}

Основная проблема заключается даже не во вложенности каскада, а в том, что указано фиксированное значение для высоты элемента с классом main-container. В верстке высота блока должна подстраивается под контент элемента. Поэтому ее нельзя фиксировать.


Хорошо, нельзя задавать высоту, но как же исправить эту ситуацию? Есть очень простой и надежный способ. Это добавить элемент со свойством clear и значением both за float-элементами или в конец родительского блока, как в нашем случае.


Для добавления такого элемента воспользуемся псевдоэлементом :after.


.clearfix:after{
 content: "";
 display: block;
 clear: both;
}

И HTML примет следующий вид:


<div class="top-panel">
 <div class="main-container clearfix">
  <ul class="menu">
   <!-- menu -->
  </ul>
  <form class="search">
   <!-- search -->
  </form>
 </div>
</div>

CSS изменится следующим образом:


.top-panel{
 background-color: #ededed;
 min-width: 960px;
}
.menu{
 float: left;
}
.search{
 float: right;
}

А теперь, подумаем над следующим вопросом. Мы уже говорили, что при правильной верстке блоки можно свободно перемещать по странице. Но, при текущей реализации мы не добьемся такой универсальности из-за свойства float. Как же быть? Мы точно знаем, что в верхней панели меню находится слева, а поиск — справа. Поэтому можно создать дополнительные классы, в которых и пропишем float:


<div class="top-panel">
 <div class="main-container clearfix">
  <ul class="menu top-panel__menu">
   <!-- menu -->
  </ul>
  <form class="search top-panel__search">
   <!-- search -->
  </form>
 </div>
</div>

CSS изменится следующим образом:


.top-panel{
 background-color: #ededed;
 min-width: 960px;
}
.top-panel__menu{
 float: left;
}
.top-panel__search{
 float: right;
}

Стилизация меню


Для стилизации блока я использую следующий CSS:


.top-panel__menu{
 float: left;
}
.menu{
 width: 620px;
 padding: 12px 0;
 list-style: none;
}
.menu__item{
 display: inline-block;
}
.menu__link{
 color: #353743;
 font-size: 14px;
 margin-right: 15px;
 text-decoration: none;
}
.menu__link:hover{
 text-decoration: underline;
}

Какие ошибки я здесь вижу.


Во-первых, у menu задан padding сверху и снизу равные в 12 пикселей. Это нужно для того, чтобы сделать отступы от края блока. Вроде все хорошо. Но, если мы посмотрим на верхнюю панель в целом, то увидим, что у поиска тоже есть отступ сверху. Поэтому, общий отступ лучше задавать родительскому блоку. Например, .top-panel. А у меню добавить не хватающие значения, используя уже margin, т.к это уже будет внешний отступ:


.top-panel{
 background-color: #ededed;
 min-width: 960px;
 padding-top: 7px;
 padding-bottom: 7px;
}
.top-panel__menu{
 float: left;
}
.menu{
 width: 620px;
 margin-top: 5px;
 margin-bottom: 5px;
 list-style: none;
}

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


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


Измененный CSS меню теперь выглядит таким образом:


.top-panel{
 background-color: #ededed;
 min-width: 960px;
 padding-top: 7px;
 padding-bottom: 7px;
}
.top-panel__menu{
 float: left;
}
.menu{
 margin-top: 5px;
 margin-bottom: 5px;
 list-style: none;
}
.menu__item{
 display: inline-block;
 margin-right: 15px;
}
.menu__link{
 color: #353743;
 font-size: 14px;
 text-decoration: none;
}
.menu__link:hover{
 text-decoration: underline;
}

Стилизация поиска


Для стилизации блока я использую следующий CSS:


.top-panel__search{
 float: right;
}
.search{
 padding: 5px 0;
}
.search__field{
 width: 135px;
 height: 25px;
 background-color: #D2D2D2;
 padding: 0 10px;

 font-size: 12px;
 transition: width 0.9s 0s;
 vertical-align: middle;
}
.search__field:focus{
 width: 200px;
 outline: none;
}
.search_button{
 position: relative;
 right: 4px;
 top: 1px;

 background: none;
 vertical-align: middle;
}

Из-за того, что я добавил padding к элементу с классом top-panel, у нас увеличилось расстояние от верхнего края панели до поиска. Поэтому, я удалю его из класса search.


Также, ранее, мы изменили верстку кнопки поиска, поэтому, на данном этапе она отличается от дизайна. Нам нужно задать размеры кнопки и добавить иконку лупы, используя свойство backgorund. Также требуется установить text-indent для скрытия текста:


.search_button{
 width: 25px;
 height: 25px;

 position: relative;
 right: 4px;
 top: 1px;

 text-indent: -9999px;
 background: url("../images/search_icon.png") no-repeat 0 0;
 vertical-align: middle;
}

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


Для решения это проблемы, я просто задам им свойство float со значением left и уберу position у кнопки:


.search__field{
 width: 135px;
 height: 25px;
 background-color: #D2D2D2;

 padding-right: 10px;
 padding-left: 10px;

 font-size: 12px;
 transition: width 0.9s 0s;
 float: left;
 vertical-align: middle;
}
.search_button{
 width: 25px;
 height: 25px;

 float: left;
 text-indent: -9999px;
 background: url("../images/search_icon.png") no-repeat 0 0;
 vertical-align: middle;
}

Далее, добавлю ранее созданный класс clearfix к элементу с классом search:


 <form class="search clearfix">
  <input type="text" class="search__field" name="query" placeholder="Поиск по сайту">
  <button type="submit" class="search__button">Найти</button>
 </form>

И вроде как работает. Но! У нас сейчас есть одна из моих любимейших ошибок, которую я встречаю даже у опытных верстальщиков. Давайте посмотри вновь на CSS поля ввода и кнопки:


.search__field{
 width: 135px;
 height: 25px;
 background-color: #D2D2D2;

 padding-right: 10px;
 padding-left: 10px;

 font-size: 12px;
 transition: width 0.9s 0s;
 float: left;
 vertical-align: middle;
}
.search_button{
 width: 25px;
 height: 25px;

 float: left;
 text-indent: -9999px;
 background: url("../images/search_icon.png") no-repeat 0 0;
 vertical-align: middle;
}

В обоих классах есть свойство vertical-align, с помощью которого можно выровнять строчно-блочные элементы по вертикальной оси. Но! Сейчас у нас уже блочные элементы! Свойство float влияет на поток элементов и делает их блочными. Это нужно помнить всегда. Поэтому я удалю vertical-align у элементов.


.search__field{
 width: 135px;
 height: 25px;
 background-color: #D2D2D2;

 padding-right: 10px;
 padding-left: 10px;

 font-size: 12px;
 transition: width 0.9s 0s;
 float: left;
}
.search_button{
 width: 25px;
 height: 25px;

 float: left;
 text-indent: -9999px;
 background: url("../images/search_icon.png") no-repeat 0 0;
}

Заключение


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

Поделиться публикацией
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама
Комментарии 88
  • 0
    Подскажите, почему скрывать текст лучше через text-indent, а не через font-size:0?
    • 0
      Слушал подкаст «Веб-стандарты», и там Вадим Макеев говорил про text-indent. Я хочу проверить это, но пока руки не дошли. Поэтому доверяем старшему поколению =)

      P.S: Если у вас есть возможность проверить, то давайте протестируем.
      • 0
        Нет, спорить с вами не было намерения — просто хотел узнать, какие есть плюсы.)
        • 0
          Нашел вот такой тест — http://terrillthompson.com/tests/hiddencontent.html
          • 0
            Элементарно, не будет занижение в выдачи от поисковых систем, они давно уже штрафуют за такие тоюки, вроде конда шрифт 0рх или фон и цвет одинаковый.
          • +1
            Еще есть момент по поводу text-indent: -9999px;, давно уже отказался от -9999px. В свое время где-то встречал, что это лишняя нагрузка на браузер. Вместо этого использую:
              text-indent: 100%;
              white-space: nowrap;
              overflow: hidden;
            
            • 0
              К сожалению, это не всегда можно использовать. Но в ряде случаев годный способ.
          • 0
            насколько помню, были проблемы в Safari браузере с font-size:0, но могу ошибаться.
          • +2
            Minimal font size в браузере?
            • +1
              В последнем бутстрапе интересная реализация скрытия текста:
              .text-hide {
                font: 0/0 a;
                color: transparent;
                text-shadow: none;
                background-color: transparent;
                border: 0;
              }
              
            • +1
              Почему ul > li > a вместо nav > a?
              • 0
                Потому что первоначально меню было сверстано через список, но если не учитывать это, то использование тега nav более правильное решение.
                • +1
                  Не в упрек статье, сам такое писал. Я понимаю, что первое время может быть сложно, но лучше сразу выберите одну из существующих методологий верстки, например БЭМ(но не обязательно ее, главное — чтобы логика верстки подчинялась каким-то формализованным правилам) и используйте ее.

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

                  Это будет лучше любого самодельного велосипеда, реализующего тоже самое, только хуже.
                  • +2
                    Извините, но не понял про велосипед. Я в работе сейчас и использую БЭМ. В статье специально не упоминал про него, потому что цель была показать ошибки.
                    • +1
                      Большая часть перечисленных ошибок проистекает из-за отсутствия заранее определенных правил верстки. Методология задает такие правила.
                      • 0
                        И да, и нет. Начинающему специалисту практически невозможно выбрать методологию. Но я основываюсь на своем опыте.
                        • –1
                          Можно выбрать любую из популярных не вдаваясь в подробности — БЭМ, OOCSS, изучить ее, и верстать в этом стиле. Для начинающего, да и для опытного верстальщика это будет лучше, чем если не выбирать никакую.
                          • 0
                            Я согласен, что методологии нужны. Но начинающему надо изучать семантику, способы позиционирования и другие основы.
                            • 0
                              Ну тут двояко. Если начинающий работает за деньги, а часто это так, то не стоит изучать семантику и способы позиционирования за счет заказчика, хотя и хочется. С этой версткой вероятно потом придется работать другим людям.

                              На своих проектах можно делать что угодно.
                              • 0
                                Не не. За деньги заказчика не учатся.
                    • 0
                      С приходом Shadow-DOM, можно будет забыть о таких методиках как БЭМ, можно будет просто использовать человекопонятные названия, без опаски, что верстка от изменений где-то поедет. Встраивать чужие компоненты, без поиска пересечений правил. Больше не будет выстрелов в ногу…
                      • 0
                        Но, к сожалению, браузеры не торопятся с ним.
                        • 0
                          Что вам сейчас мешает использовать чистую семантику HTML?

                          Отвечу сам… Необходимость абстрагироваться от привычных понятий табличной верстки, которая хвостом тянется во всех методиках? Вот польза от врапера у элементов хэдера какая, он вообще нужен или привычно видеть переименованый тег tr… :)

                          Меня всегда поражало: верстальщик подключает bootstrap и пишет в дополнение к нему style.css еще длинной в 3-5 тыщ строк. На вопрос «нафига» удивленно смотрит на тебя…: О
                        • 0
                          А можно делать это уже сейчас с css modules и какой нибудь системой сборки.
                          • 0

                            А программист, который будет натягивать шаблон на CMS или фреймворк, не проклянёт верстальщика потом? :)

                          • 0
                            Shadow-DOM полностью изолирует пространство действия правил CSS, полностью исключая каскад. БЭМ спроектирован совсем по другому, например такую важную концепцию как «миксы» с помощью Shadow DOM не реализовать.
                        • +1
                          В-третьих, отступы между пунктами меню почему-то заданы у ссылок, хотя логичнее сделать это у элементов li. Вроде мелочь? Но в верстке мелочей не бывает!

                          Указание отступов у родительских блоков и их отсутствие у самого блока мешает простому выделению текста мышью:
                          Заголовок спойлера
                          image

                          • +1
                            Отступы должны быть именно у родителей, но не внешние а внутренние. Тогда и выделяется всё нормально, и правильнее по БЭМу.
                          • 0
                            Я вот не понял, то, что вы расскажете о смысле .menu__link в 4 часа ночи, это ок, но что делает '.main-container' в верхней панели??? Это же как вы сами говорите «По сути, это основной блок страницы, в который помещаются все остальные». Но опять же какие все остальные блоки, если это кусочек сверху??
                            • 0
                              main-container — это основной блок, который присутствует везде. Он не обязательно один на странице. Он есть в верхней панели, в основной части и в подвале.
                              • 0
                                Почему не просто «content»?
                                • 0
                                  Потому что content — это контентная часть страницы. В шапке этот блок выглядел бы странно.
                                  • 0
                                    Нда, не понять мне эту логику. То есть MAIN-container может быть где угодно, а content, это только содержимое страницы?
                                    • 0
                                      https://translate.google.ru/#en/ru/content Встречая этот класс уже думаешь, что это содержимое страницы.
                                        • 0
                                          Ну вот сравните переводы.
                                          • +1
                                            Так ок, я понял дальше нет смысла вести полемику) Встречая класс «main-container», я думаю как раз о основной части всего сайта, а не о внутренностях отдельно-взятого блока. Контент же для меня это содержимое и неважно чего. Даже визуально «main-container» выглядит значительно внушительнее.
                                            • 0
                                              Wordpress, Bootstrap думают аналогично.
                                              ===
                                              автору — контентная часть страницы — это post/page, необходимо мыслить с точки зрения контента как страниц, новостей и т.д., а не разводить абстракцию внутри отдельно взятой страницы.
                                              • 0
                                                Вовсе они не думают аналогично. Хотя для меня и content и main-container оба странные для такого контекста. content действительно подходит для контента, то есть информационного наполнения страницы. Будь то даже необязательно главный контент, например about-content, promo-content. main-container — здесь приставка main будет означать то что имеет ввиду DenimTornado — какой-то главный контейнер, один для страницы. Мозг воспринимает main не как модификатор контейнера, а как указание его контекста. И БЭМ здесь со мной согласен, если вы хотите использовать container и иметь его модификаю main, то вам нужно писать container--main.
                                                Что до Wordpress и Bootstrap, то там есть просто container и fluid-container, но никак не main-container.
                                                • 0
                                                  О чём спор вообще? Используйте html тег
                                                  <main>
                                                  
                                                  • 0
                                                    htmlbook:
                                                    Элемент предназначен для основного содержимого документа. Содержимое должно быть уникальным и не включать типовые блоки вроде шапки сайта, подвала, навигации, боковой панели, формы поиска и т. п.
                                                    В ветке обсуждается наименование для контейнера, который может содержать любое содержимое, семантическое назначение блока — задавать ширину страницы. Здесь больше подходит обычный bootstrap container.
                                                    <div class=«container»>
                                                    Hello, i am top row
                                                    </div>
                                                    <div class=«container»>
                                                    Hello, i am page content
                                                    </div>
                            • 0
                              Я бы вот к тег формы особо не привязывался. Лучше все таки обернуть в дивку, может и излишне, но иногда бывают трудности с добавлением каких либо классов тегм form. Особенно это актуально для готовых сайтовых движков
                              • 0
                                Никто не запрещает обвернуть, но в данном примере это лишнее.
                              • 0
                                ошибка номер один: вы до сих пор читаете об ошибках верстальщиков.
                                • 0
                                  ошибка номер два: фреймворки придумали не дураки
                                  • 0
                                    ошибка номер три: ты читаешь, а мог бы и верстать
                                    • 0
                                      ага, вместо того чтобы писать/верстать нормально можно и дальше писать лапшу, зачем читать и подтягивать чужие идеи?
                                    • 0
                                      Спасибо, очень познавательно, в т.ч. комментарии.
                                      Буду ждать продолжение.
                                      • 0
                                        Какие источники информации (сайты, книги, видеокурсы, что угодно) посетители хабры посоветуют web frontend разработчику? Любого уровня, от справочника для освежения памяти по языку программирования, до сложнейших для понимания, но полезных для работы источников?
                                      • 0
                                        Верстаю тоже с 2011, некоторые вещи сделал бы иначе, но если по существу то начинающему лучше посоветовать юзать less и тому подобное.
                                        • 0
                                          Плохой совет, это примерно также как советовать юзать jQuery сразу, а не Ванилку.
                                          • 0
                                            Зато потом рождаются перлы на SO, вида «какой функцией добавить строку к строке?» (:
                                        • 0
                                          Правильней было бы назвать статью не «Распространенные ошибки начинающего HTML-верстальщика», а «Как сверстать шапку сайта».
                                          И вы говорите не о распространенных ошибках, а о своих. Я вот, к примеру, тег вообще не использовал когда-то.
                                          Плюс много воды, в виде дублирования одного и того же блока тегов, чутка модифицированных. Написали бы просто «как было», «как стало» и ниже список, почему так.
                                          Плюс фраза
                                          Я надеюсь, что теперь вы знаете как решать такие проблемы, поэтому я оставлю это вам. Должны же вы потренироваться! Но если вы не хотите, ответ в следующем абзаце.

                                          Ну вы либо под спойлер засуньте, либо не пишите это совсем
                                          Когда я читаю туториалы (а именно такой лейбл у названия статьи), я меньше всего хочу видеть воды: минимум букв, максимум информации.
                                          • 0
                                            Что-то не сильно верится что он наставник по верстке:(
                                            • 0
                                              ВОПРОС: а без постоянного использования флоатов можно обойтись? Я может и совсем «зелень», но костыли с cf уже достали.)))

                                              Заранее спасибо за ответ.
                                              • 0
                                                Используйте flexbox
                                                • 0
                                                  *упал-ржу-трясусь…

                                                  http://bugoaneo.github.io/GoIT/markup/home/bus-web/

                                                  Ни единого флоата.

                                                  Флексы… Спасибо… Но правда надо…
                                                  • 0
                                                    У флексов много своих багов, которые для не меню не очень подходить(т.к. отступы между пунктами).
                                                  • 0
                                                    Я часто display: inline-block; использую.
                                                    Но там свои особенности. Например чтобы между блоками не было отступа надо родителю поставить font-size: 0; и vertical-align придётся часто пользоваться. Но мне этот способ больше нравится чем float + clearfix
                                                    • 0
                                                      Этим float лучше, так как font-size: 0 ломает font-size: 100% во внутренних блоках. Если есть альтернатива font-size: 0, то inline-block будет лучшим вариантом. Можно управлять вертикальным выравниванием, flow документа, горизонтальным выравниванием.
                                                      Есть еще один принципиальный момент. Блочный элемент по умолчанию жадный по горизонтали. inline-block и inline элементы — нет, поэтому здесь опять побеждает float как более универсальный. Я могу внутри float цепочки создать блок с жадной шириной, а для inline-block нет.
                                                  • 0
                                                    Если в один ряд, то display: table неплохо. Только надо помнить особенности табличной вёрстки. Для предсказуемости лучше с table-layout: fixed. Хотя флексбоксы гибче.
                                                  • 0
                                                    Блочность можно задавать стилем, мне бывает удобно для ссылок, например, задавать display: block или inline-block, получая тем самым какое-нить меню без лишних приседаний. И наоборот, бывает удобно для DIV задать inline.

                                                    Стоит ли так делать, или же строго для блочного контента использовать блочные же элементы?

                                                    P.S. Всю работу делаю сам, потому вопрос, поймут ли коллеги структуру страницы, не стоит.
                                                    • +1
                                                      вы пишете
                                                      Мы уже говорили, что при правильной верстке блоки можно свободно перемещать по странице. Но, при текущей реализации мы не добьемся такой универсальности из-за свойства float. Как же быть?

                                                      и предлагаете
                                                      <ul class="menu top-panel__menu"> <!-- menu --> </ul>
                                                      <form class="search top-panel__search"> <!-- search --> </form>
                                                      

                                                      Но вот заказчик хочет все-таки поменять блоки местами. Что мы получим? Примерно это:
                                                      <form class="search top-panel__menu"> <!-- search --> </form>
                                                      <ul class="menu top-panel__search"> <!-- menu --> </ul>
                                                      

                                                      Видимо над названиями стоит еще подумать :) или не думать и назвать просто .top-panel__left и .top-panel__right
                                                      • 0
                                                        1 Путь. В CSS поменять float'ы.
                                                        2. Путь сделать
                                                        <form class="search search_pos-left"></form>
                                                        <ul class="menu menu-pos-right"></ul>
                                                        


                                                      • 0
                                                        Юзайте инлайн-боки и не будет головняка с порядком…
                                                        Флоатить мона БОЛЬШИЕ логические секции, которые ну вот никуда не денутся… Хотя… Сейчас умудряются и на стандартные 3-колонки через display: table;
                                                        Именовать право-лево — не выход Прямо таки представляю, как переписываю ЛЕВЫЙ блок зашивая его по центру…
                                                        • 0
                                                          Просто вопрос, как решать проблему с меж буквенным интервалом? font-size: 0 плохой вариант, так как ломает font-size: 100% во внутренних блоках.
                                                          Вариант с text-align: justify выглядит самым чистым и красивым, но меж буквенный интервал все равно хотелось бы победить. Пока для pixel perfect в основном использую float для pixel perfect.
                                                          • 0
                                                            Просто вопрос, как решать проблему с меж буквенным интервалом?

                                                            По мне так самый простой- вырезать пробелы между блоками, например, шаблонизатором.
                                                            Вообще, эта тема уже обсосана со всех сторон.
                                                            • 0
                                                              Спасибо за ссылку. Не знал, что эти отступы возникают из за \n каретки и пробелов в шаблонах.
                                                              • 0
                                                                Можно еще хтмл комментарии засунуть между блоками, если хочется блоки на новых строках, а вырезалки пробелов и переводов каретки нет.
                                                                • 0
                                                                  По ссылке описаны все способы, и с комментариями, и с незакрытием тега li (тоже неплохой и не мусорит в DOM), и прочие хаки.
                                                        • 0
                                                          .main-container {}
                                                          

                                                          Действительно, сразу стало понятно, что он оборачивает…

                                                          .search{...}
                                                          

                                                          А после этой строчки уже перестал читать. Если человек за 5 лет не придерживается стайлгайда, хотя бы от Airbnb, то это очень печально.
                                                          • 0
                                                            Эх, такие статьи, да разработчикам drupal и модуля views почитать, а то запаривает, для одного блока делает обертку из 3-5 дивов, совершенно ненужных.
                                                            • 0
                                                              Эм, а кто мешает убрать автоматическое добавление этих обёрток?
                                                              Это раз — http://take.ms/mRh3T
                                                              Это два — http://take.ms/iFYus
                                                            • –1
                                                              Я не верстальщик, но после
                                                              <ul class="menu_block menu">
                                                                <li class="menu_item"><a href="#" class="item">Единый семинар</a></li>
                                                               ...
                                                              </ul>
                                                              

                                                              перестал читать, ибо я бы сделал
                                                              <ul class="menu_block menu">
                                                                <li><a href="#">Единый семинар</a></li>
                                                               ...
                                                              </ul>
                                                              


                                                              Потому что считаю что классы menu_item и item в контексте можно опустить и описать css элементов и ссылок уже без них.
                                                              Ну возможно можно еще добавить как в бутстрапе вспомогательные классы к li, такие как active, header и т.п.
                                                              • +1

                                                                Ага, а вы уверены, что тут всегда будут теги ul, li и a? Если придётся их поменять, то в вашей безклассовой версии придётся менять и разметку и вёрстку. В случае с классами — только разметку. Каскады без классов — зло

                                                                • 0
                                                                  Ничто не мешает дополнить описание стилей как необходимо. Да и класс menu явно указывает на то что это разметка для меню, а не для чего либо еще.
                                                                  А про каскады без классов бы разработчикам twiter bootstrap расскажите. Сколько с ним работал, у них там полно таких моментов и ничего, люди живут, пользуются, меняют что надо и не говорят что неудобно.
                                                                  Также, невооруженным глазом мой вариант читается и воспринимается легче. Ну это конечно мое ИМХО.
                                                                  • +1
                                                                    БЭМ с вами категорически не согласен.
                                                                    Когда у каждого элемента уникальное имя — любой элемент можно вытащить в пределах блока на любой уровень, не трогая css. Браузер может парсить стили в один проход по ключу имени класса, что гораздо производительнее. Я знаю о чем говорю, в хорошо проделанном среднестатическом сайте с адаптивной адаптацией под множество экранов style.css может доходить до 3к-5к строк. Это сотни селекторов. Во время правок элементы могут двигаться, дополняться.
                                                                    • +1

                                                                      twitter bootstrap не идеал. Одно дело, когда тэги без классов в селекторах с каскадами используются, чтобы переопределить специфичные для тэга стили (например, цвет ссылки или стиль пункта списка). И совсем другое дело — ваш пример. Если я захочу в разметке вместо иерархии ul>li>a использовать nav>a, то вёрстка рассыпется.


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

                                                                      • 0
                                                                        Он далеко не идеал :) А какие у вас проблемы возникали с внедрением своей верстки рядом с bootstrap?
                                                                        К примеру, я не делаю всю страницу в одном container, я размещаю их один за другим строками, поэтому в любом месте страницы я могу вставить какой угодно компонент. padding внутри col я всегда обнуляю.
                                                                • 0
                                                                  1. floats: а можно для контейнера задать overflow: hidden, scroll… Тогда у родителя высота пересчитается и бцдет ненулевая, а какая нужна.
                                                                  2. Писать html для того, чтобы потом все можно было перемещать и не переписывать стили… А вот захотим мы top-panel перенести в узкий блок, а у top-panel стоит стиль min-width: 960px. И чё делать?
                                                                  3. Если уж Вы пишете сайт с расчётом на то, что у кого-то там стили отключены, то не забывайте задавать цвет фона, если кроме этого задана картинка для фона. Вы же не хотите, чтобы у вас кнопочка была беленькая?
                                                                  • 0
                                                                    1) можно
                                                                    2) В этом случае придется сделать рефакторинг =)
                                                                    3) Во всех браузерах по-умолчанию есть фон у кнопки. А так совет хороший. Часто вижу, что верстальщики не подкладывают под картинку цветной фон.
                                                                  • 0
                                                                    В свое время пока не прочел книгу
                                                                    CSS. Каскадные таблицы стилей. Эрика Мейера, часто мучился при верстке. Из тех книг что читал нигде не было указано формулы расчета высоты и ширины блоков.
                                                                    • +1

                                                                      Спасибо большое за статью — было интересно почитать и переосмыслить свою вёрстку.


                                                                      Мне кажется, что ещё можно было не завязываться на float при позиционировании меню и поиска слева/справа, а использовать более современный подход с flexbox:


                                                                      .top__panel {
                                                                        display: flex;
                                                                        flex-direction: row;
                                                                        justify-content: space-between;
                                                                        align-items: center;
                                                                      }

                                                                      , либо использовать альтернативу


                                                                      .top__panel {
                                                                        text-align: justify;
                                                                      }
                                                                      
                                                                      .top__panel:after {
                                                                        display: inline-block;
                                                                        width: 100%;
                                                                        height: 0;
                                                                        content: '';
                                                                      }
                                                                      
                                                                      //Но здесь тогда нам нужно вернуть .menu и .search display: inline-block;
                                                                      .menu, .search {
                                                                        display: inline-block;
                                                                        vertical-align: middle;
                                                                      }
                                                                      

                                                                      Тогда нам не нужны классы .top-panel__menu и .top-panel__search и мы так же спокойно можем переиспользовать menu и search, а в самом .top-panel у нас просто будет "своя атмосфера".

                                                                      • 0
                                                                        Нет проблем!

                                                                        По поводу flexbox. Если бы я верстал этот проект под современные браузеры, то я выбрал бы его. Также интересное решение с text-align: justify. Я раньше его не встречал.

                                                                    Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.