Подход

Узнайте об основных принципах, стратегиях и методах, используемых для создания и поддержки Bootstrap, для легкой самостоятельной настройки.

В то время как вводные страницы дают введение в использование Bootstrap, этот документ фокусируется на том, почему BS4 такой, какой он есть. Тут объясняется наша философия веб-разработки, которой мы с радостью делимся с другими, а также делаем вклады в данную сферу и помогаем другим.

Разработали лучшее решение или увидели недочет? Задайте вопрос нам – мы с радостью ответим.

Резюме

Мы коснемся каждой из этих тем более подробно, на более высоком уровне. Вот наши подходы:

• Компоненты должны быть отзывчивы и mobile-first
• Компоненты должны создаваться на базовых классах и расширяться/модифицироваться с использованием классов-модификаторов
• Состояния компонентов должны «подчиняться» общей шкале z-индекса
• Когда только возможно, предпочитать HTML и CSS, нежели JavaScript
• Когда только возможно, использовать классы-утилиты, а не код CSS
• Когда только возможно, избегать применения строгих требования HTML (селекторы дочерних элементов)

Отзывчивый

«Отзывчивые» стили Bootstrap созданы как mobile-first. Мы используем этот термин в нашей документации и в целом согласны с ним, но иногда его толкуют слишком широко. Хотя не каждый компонент BS4 должен быть совершенно «отзывчивым», этот подход призван уменьшить количество переменных CSS, несущих разные функции, посредством просто добавления стилей при увеличении области просмотра.

Вы увидите данный подход лучше всего в медиа-запросах. В большинстве случаев мы используем запросы min-width, которые начинают применяться на специфическом брейкпойнте и работают вплоть до самых больших. Например, значение .d-none применяется от min-width от 0 до бесконечности. С другой стороны, .d-md-none применяется с контрольной точкой и вверх.

Временами, когда сложность компонента требует max-width, мы используем этот параметр. Подобные «перекрытия стиля» функционально и «ментально» проще для внедрения и поддержки, чем изменение и переписывание «коренного» функционала наших компонентов. Мы стремимся ограничить использование такого подхода, но иногда используем его.

Классы

Кроме нашего Reboot’а – CSS-инструментом кросс-браузерной нормализации – все наши стили нацелены на использование классов в качестве селекторов. Это значит, что происходит возможность избежать типов селекторов (например, input[type="text"]) и внешних родительских классов (например, .parent .child), которые делают стили слишком специфичными для легкого перекрытия стилей.

Посему компоненты должны создаваться на базовом классе, который содержит общие пары значений свойств, которые не будут перекрыты. Например, классы .btn и .btn-primary. Мы используем класс .btn для всех обычных стилей, как display, padding и border-width. Мы используем модификаторы как .btn-primary для добавления цветов, фона, цвета границ и т.д.

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

Шкалы z-index’a

В BS4 есть две шкалы z-index - элементы внутри компонента и «наложенные» компоненты.

Элементы компонентов

• Некоторые компоненты в BS4 «построены» с использованием перекрывающих компонентов, это сделано для предотвращения возникновения двойных границ, которое может возникнуть без изменения свойства border. Например, группы кнопок, группы ввода, нумеровка страниц.
• Эти компоненты разделяют стандартную шкалы z-index - от 0 до 3.
• 0 – значение по умолчанию (начальное), 1 - :hover, 2 - :active/.active, а 3 - :focus.
• Такой подход совпадает с нашими ожиданиями более высокого приоритета для юзера. Если элемент «в фокусе», он находится в поле зрения и в поле его внимания. Активные элементы – вторые по значимости, т.к. они показывают состояние. Hover – третий по важности, потому что он показывает намерение юзера, но на почти все элементы можно навести курсор.

Компоненты с наложением

В bootstrap есть несколько компонентов, которые функционируют в некотором смысле как таковые с наложением. Сюда входят, в порядке уменьшения z-index’а: выпадающие элементы, фиксированные и «липкие» навбары, модальные окна, всплывающие подсказки и поповеры.

Каждый компонент с наложением слегка увеличивает свой z-index таким образом, что обычные принципы UI позволяют юзеру видеть «фокусированные» или hovered-элементы в своем поле зрения. Например, модальное окно – элемент, который блокирует документ (т.е. вы не можете предпринять никаких действий, пока оно не исчезнет), так что мы поместили модальные элементы выше навбаров.

Узнайте больше об этом на нашей странице верстки с z-index.

HTML and CSS, а не JS

Когда только возможно, мы не используем JS. В целом, HTML и CSS более эффективны и доступны большему числу людей разного уровня опыта. HTML и CSS также быстрее в браузерах, чем JS, и ваш браузер в целом поддержит их богатую функциональность.

Этот принцип воплотился в нашем первоклассном API для JavaScript, и атрибутах data. Теперь вам не надо писать весь код JavaScript, когда есть наши плагины, заместо этого, пишите HTML. Читайте больше об этом здесь.

В последнее время наши стили «строятся» на фундаментальном поведении обычных веб-элементов. Когда только возможно, мы предпочитаем использовать возможности браузера. Например, вы можете поместить класс .btn в почти любой элемент, но большинство элементов не придадут этому классу какого-либо семантического значения или функциональность браузера не обработает его. Вместо .btn, например, используйте <button> и <a>.

То же происходит с более сложными компонентами. Хотя мы могли бы написать свой плагин валидации форм, который добавляет классы в родительский элемент в зависимости от состояния формы ввода, т.о. позволяя стилизовать текст, скажем, красным цветом, мы предпочитаем использовать псевдоэлементы :valid/:invalid, которые содержатся во всех браузерах.

Утилиты

Классы-утилиты – которые есть в Bootstrap 3 – сильный «союзник» в борьбе с плохой производительностью страниц. Класс-утилита – это обычно одиночное, неизменяемая пара «атрибут: значение», записанное в классе (например, .d-block выражает display: block;). Их главное преимущество – скорость использования при ограниченном количестве необходимого кода HTML и CSS.

В отношении обычного CSS утилиты помогают бороться с увеличением размера файла, т.к. они записывают один раз те пары «атрибут : значение», которые необходимо было повторять много раз. Это помогает в разы уменьшить вес файлов.

Гибкий HTML

Мы стараемся, чтобы требования к компонентам HTML не были слишком догматичными, хотя это и не всегда возможно. Итак, мы фокусируемся на одиночных классах в наших селекторах CSS и пытаемся избежать непосредственных дочерних селекторов (>). Это даст вам больше гибкости и поможет упростить CSS.

Условные обозначения кода

Руководство по коду (от соавтора Bootstrap, @mdo) документирует, как мы пишем наш HTML и CSS через Bootstrap. Он определяет рекомендации по общему форматированию, значениям по умолчанию, основанным на здравом смысле, порядку свойств и атрибутов и т. д.

Мы используем Stylelint, чтобы обеспечить соблюдение этих и других стандартов в нашем Sass/CSS. Наша настраиваемая конфигурация Stylelint имеет открытый исходный код и доступна для использования и расширения другими.

Мы используем vnu-jar для обеспечения соблюдения стандартного и семантического HTML, а также для обнаружения распространенных ошибок.