Сброс CSS стилей Bootstrap Reboot

Существует множество вариантов сбросов стилей CSS. И также много о них написано. Я просто объясню почему я остановился на Bootstrap Reboot



Прежде чем начать, хотел бы обратить внимание, что у блога есть телеграм канал https://t.me/frontips, где можно узнавать о выходе новых статей и со временем будет появляться больше интересной и полезной информации.

Поддержите развитие блога и канала подпиской!

А теперь перейдём к теме статьи ;) Приятного чтения!



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

Если стили не сбросить к единым, то потом при проверке в разных браузерах натолкнемся на неприятные моменты, когда, к примеру, отступы у одних и тех же элементов разные и верстка ломается, потом исправляем отображение, например, в Firefox - а она ломается в Chrome и так далее.

Первое преимущество в начальных стилях. Так выглядит страница после подключения одного из самых популярных CSS сбросов Normalize.css

'1'

А после подключения Bootstrap Reboot, не написав еще ни строчки CSS, сразу же получаем эстетически приятный вид

'2'

Самое важное преимущество Bootstrap Reboot в том, что по-умолчанию для всех элементов(включая псевдо-элементы) установлено свойство box-sizing в значение border-box

*,
*::before,
*::after {
  box-sizing: border-box;
}

Объясню на простом примере, что дает это свойство.

Например, нужно сверстать блок шириной 400px с текстом, рамкой 10px и внутренним отступом текста от рамки 25px

'1'

Создаем html

<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, ut itaque illo laudantium possimus incidunt veritatis hic ab, magnam nesciunt natus est nisi iste voluptatem aperiam. Ut nesciunt, voluptates earum aliquid ad culpa assumenda eum nemo. Recusandae eos neque, commodi ducimus molestiae ea quis velit laudantium asperiores, delectus quam fuga, et tempora illo dicta quia nisi? Quos possimus at ducimus eum, odio earum reiciendis distinctio ad consequuntur architecto provident soluta, ratione sapiente ex perferendis quas. Aspernatur reprehenderit earum ex iste aliquid facere, veniam accusantium repellendus delectus, eum in doloribus explicabo suscipit itaque odio soluta praesentium ipsa, commodi esse saepe cupiditate!</div>

Задаем стили

.text {
  padding: 25px;
  width: 400px;
  border: 10px solid #f7cb15;
}

Без свойства box-sizing: border-box; получаем блок шириной большего размера(470px), чем была задана(400px).

'2'

Так как свойство box-sizing по-умолчанию имеет значение content-box заданная ширина применятся к контенту(а не к блоку), а потом к ширине контента 400px еще прибавляется padding по 25px слева и справа и ширина рамки по 10px слева и справа и итоговая ширина блока становится 400px(ширина контента) + 50px(padding слева и справа) + 20px(border слева и справа) = 470px

Если же свойству box-sizing поставить значение border-box, то указанная ширина будет применена к блоку(а не к контенту) с учетом размеров padding и border

'3'

В итоге мы контролируем внешние размеры блока независимо от установленных padding и border и на мой взгляд это логичней, и то что в Bootstrap Reboot по-умолчанию box-sizing: border-box; установлен на все элементы это для меня большой плюс.

Написал отдельную статью - Почему размеры блока больше заданных.



В каждом проекте, которые верстаю с нуля, подключаю Bootstrap Reboot

Чтобы подключить Bootstrap Reboot, заходим на официальный сайт Bootstrap

Ищем кнопку Download

'3'

Под заголовком Compiled CSS and JS нажимаем на Download

'4'

В скачаном архиве заходим в папку css и находим файл bootstrap-reboot.min.css

'5'

Копируем его в папку проекта, где лежит основной файл стилей, у меня обычно это папка /css, где лежит основной файл main.css

Затем в HTML-файле, например, в index.html в блоке <head></head> подключаем сначала bootstrap-reboot.min.css(этот файл всегда подключается первым) и только потом уже основной файл стилей, в моем случае это main.css

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap-reboot.min.css"/>
    <link rel="stylesheet" href="css/main.css"/>
  </head>
  <body>
  </body>
</html>

Подробности на официальном сайте - Bootstap Reboot



Друзья, стараюсь для вас, поддержите проект!

Подписывайтесь, впереди много всего интересного и полезного ;)

Telegram - https://t.me/frontips

VK - https://vk.com/frontips