Bootstrap предоставляет быстрый и простой способ создания платформы для вашего последнего сайта или приложения, будь вы новичок или профессиональный разработчик. По этой причине все больше разработчиков включают фреймворк в свой личный инструментарий.
Однако у Bootstrap есть и темная сторона, заключающаяся в том, что она позволяет невероятно легко писать загроможденную, несемантическую и не подлежащую повторному использованию разметку, которая будет корректно отображаться во всех браузерах.
В этой статье я объясню, как вы можете использовать Bootstrap более надежным и семантическим способом. Последняя версия Bootstrap поставляется с официальным портом Sass фреймворка, поэтому мы используем одну из самых мощных функций Sass для достижения этой цели: директиву @extend .
Некоторые основы семантики
Во-первых, давайте рассмотрим, что мы имеем в виду, когда говорим, что хотим сделать вещи более «семантическими». HTML-документы предназначены для описания их содержания с точки зрения информационной иерархии. Нужно уметь их читать и знать, о чем они, а не как они будут выглядеть.
С ростом популярности CSS и особенно CSS-фреймворков HTML часто пишется с учетом CSS-листа, а не читателя / разработчика.
Нередко встречается такая разметка HTML в исходном коде современных веб-сайтов:
<div class="row"> <div class="col-md-4"> Name: </div> <div class="col-md-4"> John </div> <div class="col-md-4"> Smith </div> </div> <div class="row"> <div class="col-md-12"> <p> "I enjoy writing code in my spare time." </p> </div> </div> CSS-файлы Bootstrap точно знают, что с этим делать. Два ряда, один разделенный на трети, а другой на всю ширину. Как разработчики, знакомые с Bootstrap, нам достаточно легко это понять, но что, если бы вы никогда раньше не использовали фреймворк? Для чего этот фрагмент HTML? К чему относится информация? Разметка не раскрывает ничего практичного.
Семантическая разметка — это код, который описывает его содержание, а не его внешний вид. Мы могли бы написать приведенный выше код семантически следующим образом:
<div class="author-name"> <label class="author-nameLabel"> Name: </label> <span class="author-nameFirst"> John </span> <span class="author-nameLast"> Smith </span> </div> <div class="author-bio"> <p> "I enjoy writing code in my spare time." </p> </div>
Это не так уж и отличается, но сразу говорит нам, для чего предназначен каждый элемент и как каждый может относиться к другим элементам. Мы потеряли знание о том, как это будет представлено визуально. Но это не цель HTML в конце концов.
Как Bootstrap должен стилизовать это?
Вам может быть интересно, как вы собираетесь использовать Bootstrap без каких-либо встроенных имен классов в вашей разметке? Что ж, мы можем использовать возможности @extend Sass для решения этой проблемы.
Из документации Sass:
@extendработает путем вставки расширяющего селектора в любую точку таблицы стилей, в которой появляется расширенный селектор.
Это означает, что мы можем использовать наши семантические селекторы и расширять селекторы Bootstrap, чтобы получить все его преимущества. Вот как:
/* Import bootstrap-sass so that we have access to all of its selectors */ @import "bootstrap"; /* Author Bio and Author Name are just Bootstrap .row elements */ .author-bio, .author-name { @extend .row; } /* Author nameLabel, nameFirst and nameLast need to be a third of their container's width */ .author-nameLabel, .author-nameFirst, .author-nameLast { @extend .col-md-4; } /* The paragraph inside the author's bio should be full width */ .author-bio p { @extend .col-md-12; }
Благодаря магии @extend наши селекторы @extend в скомпилированные таблицы стилей вместе с селекторами Bootstrap, которые они расширяют. Как вы увидите, изучив скомпилированный код, наши селекторы имеют все те же свойства, что и классы, которые они расширяют.
Например, вы должны увидеть это в скомпилированном CSS:
/* one of the compiled rule sets */ .col-md-4, .author-nameLabel, .author-nameFirst, .author-nameLast { width: 33.3333333333%; }
Вы можете просмотреть Sass рядом с скомпилированным CSS здесь . Аккуратно, а?
Повторное использование
Еще одна замечательная особенность этого метода заключается в том, что он создает читаемые и повторно используемые компоненты. Например, вам не нужно перестраивать авторский компонент из строк и столбцов каждый раз, когда вам нужно его использовать. Вместо этого у вас есть разумные имена для каждой части компонента, что упрощает создание. Вы также можете положиться на Bootstrap, чтобы убедиться, что он представлен равномерно по всему сайту.
портативность
Хотя Boostrap — одна из лучших доступных платформ, может наступить время, когда вы захотите переместить свой сайт на другую платформу или даже написать свою собственную. С описанным выше методом вы можете сделать это легко, потому что ваша разметка четко отделена от вашего CSS.
Заполните свой инструментальный пояс
Если вы еще не пробовали Sass-версию Bootstrap, вас ждет угощение. Это легко начать на их странице GitHub .
Sass здесь не единственная игра. Если вам действительно нужна семантика следующего уровня в ваших HTML и CSS, я рекомендую принять соглашение об именах, такое как BEM или SMACSS, чтобы ваши селекторы были стандартизированы и легко запоминались.
Иди дальше и расширяйся
Bootstrap дает нам невероятно мощный набор стилей — но слишком легко объединить их во что-то презентабельное при потере разметки качества. С директивой Sass @extend вы можете свободно писать разметку, которая будет понятна как ее содержимому, так и читателям, которые ее читают.