Свой reset.css для сброса стилей и задание базовых стилей style.css

Сброс базовых стилей reset.css

В данной статье рассмотрим создание своего файла reset.css для сброса базовых стилей браузеров. А также рассмотрим файл стилей, который послужит базовым набором стилей для создания адаптивного и отзывчивого интерфейса.

1. Пожалуй, лучше всего свойство box-sizing устанавливать в border-box, что является определенным стандартом при разработке.

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

Свойство box-sizing

box-sizing: content-box (размеры не включают margin, padding, border) и border-box (размеры включают только padding и border). Свойство по-умолчанию — content-box значит, что если задаем блоку фиксированные размеры, то на самом деле размеры этого блока будут ширина и высота + padding + margin + border. Фактический размер будет больше.

2. Для тега body определенно стоит обнулить значения padding и margin в силу того, что в разных браузерах они могут быть по разному определены.

body {
  padding: 0;
  margin: 0;
}

3. Пожалуй, с ul и ol все понятно и никто не хочет работать со стандартным отображением списков.

ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

4. Убираем у ссылок стандартное поведение — подчеркивание снизу.

a {
  text-decoration: none;
}

5. Заголовки H1, H2 и т.д. В зависимости от браузера они могут быть разными.

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: inherit;
  font-size: inherit;
}

Таким образом итоговый файл reset.css будет выглядеть примерно таким образом:

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

body {
  padding: 0;
  margin: 0;
}

ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: inherit;
  font-size: inherit;
}

Базовые стили style.css

Рассмотрим создание файла с базовым набором стилей style.css. Для body добавил базовые стили, которые позволят интерфейсу быть на всю высоту и контролировать блоки header, main и footer (прижать к подвалу). Задать базовый шрифт, цвет текста и цвет фона. Также здесь указывается минимальная ширина интерфейса (можно ориентироваться на ширину макета (figma) мобильной версии).

body {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  min-height: 100vh;

  min-width: 320px;
  font-family: Roboto, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  background-color: #ffffff;
  color: #000;
}

Далее базовые стили, которые позволяют сделать все изображения на сайте отзывчивыми.

img {
  max-width: 100%;
  height: auto;
}

Контейнер есть и должен быть на всех сайта. Именно контейнер позволяет является первым шагом к адаптивному интерфейсу.

.container {
  max-width: 1440px;
  padding: 0 92px;
  margin: 0 auto;
}

@media (max-width: 1024px) {
  .container {
    padding: 0 43px; 
  }
}

@media (max-width: 768px) {
  .container {
    padding: 0 29px;
  }
}
 
@media (max-width: 560px) {
  .container {
    padding: 0 16px;
  }
}

Также применим в базовых стилях сброс стилей кнопок.

button {
  background-color: transparent;
  border: 0;
  cursor: pointer;
}