Михаил Юдин

Минимальный файл сброса стилей minireset.css

Минимальный файл сброса стилей minireset.css

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

Тернистый путь

Существует много вариантов, версий normalize.css, reset.css, у каждой есть свои достоинства и недостатки. Приходится вносить правки иногда, переопределять уже существующие стили. К тому же, многие решения довольно тяжёлые, ведь зачем всё приводить к нормализованному виду, чтобы затем переопределять многие из свойств?

До того, как я обнаружил для себя reset.css, приходилось каждый раз указывать своё значение margin, padding и box-sizing, сбрасывать значение list-style для немаркированных списков, потому как при первоначальной вёрстке они чаще всего используются для построения многоуровневых меню, иногда и сами списки перестилизуются.

Чтобы всего этого избежать, можно воспользоваться минимальным файлом сброса стилей.

Легковесное решение

Можно пойти по пути минимализма и сбросить только основные свойства, которые чаще всего требуют сброса. Раньше делал так:


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

И этого было вполне достаточно. Но позже я понял, что так делать не стоит. Селектор так себе, заголовки страдают и ещё кое-какие грабли появляются от такой простоты.

Позже нашёл простое современное решение — минимальный и в то же время более полноценный вариант сброса стилей minireset.css

В итоге когда начинаю проект, мне хватает только minireset.css для сброса основных стилей и дальше уже приятно вести разработку. Конечно иногда возникает желание дописать что-то в исходник minireset.css, но пока это не дорастает до pull request.

Ещё почитать

Нет фото

Parsee - простой вкусный парсер сайтов

Чеклист оптимизации скорости загрузки веб-приложения ✓

Чеклист оптимизации скорости загрузки веб-приложения ✓

Переход с PHPStorm или Intellij IDEA на VIM

Переход с PHPStorm или Intellij IDEA на VIM

Подсветка активных ссылок на чистом JavaScript

Подсветка активных ссылок на чистом JavaScript

Рендер текстовых шаблонов по данным из массива PHP

Рендер текстовых шаблонов по данным из массива PHP

Битва титанов: normalize.css против reset.css

Битва титанов: normalize.css против reset.css