Подход

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

Видите что-то, что звучит неправильно, или, возможно, можно было бы сделать лучше? Создать предложение - мы будем рады обсудить это с Вами.

Резюме

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

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

Адаптивность

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

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

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

Классы

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

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

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

Шкалы z-index

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

Составные элементы

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

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

Bootstrap включает в себя несколько компонентов, которые функционируют как своего рода наложение. Это включает в себя в порядке наивысшего z-index, выпадающие списки, фиксированные и закрепленные панели навигации, модальные окна, всплывающие подсказки и всплывающие окна. Эти компоненты имеют собственную шкалу z-index, которая начинается с 1000. Этот начальный номер был выбран произвольно и служит небольшим буфером между нашими стилями и пользовательскими стилями Вашего проекта.

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

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

HTML и CSS поверх JS

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

Это наш первоклассный JavaScript API, использующий атрибуты data. Вам не нужно писать почти какой-либо JavaScript, чтобы использовать наши плагины JavaScript; вместо этого напишите HTML. Подробнее об этом читайте на нашей странице обзора JavaScript.

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

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

Утилиты

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

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

Гибкий HTML

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

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

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

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

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