Мой сброс CSS | Кодементор

Многие разработчики интерфейсов начинают стилизацию своих веб-сайтов с помощью Normalize. У некоторых разработчиков есть личные настройки, которые они добавляют в Normalize.css. У меня тоже есть свои предпочтения.

В этой статье я хочу поделиться этими предпочтениями с вами. личный сброс CSS (который я использую в дополнение к Normalize.css) с вами.

Я разделяю сбросы на 8 категорий:

1. Размер коробки
2. Удаление полей и отступов
3. Списки
4. Формы и кнопки
5. Изображения и вставки
6. Столы
7. Скрытый атрибут
8. Носкрипт

Размер коробки

box-sizing Свойство изменяет то, как работает модель CSS Box. Это меняет то, как width, height, padding, borderа также margin рассчитываются свойства.

Настройка по умолчанию для box-sizing является content-box. Я предпочитаю изменить это на border-box потому что мне легче стиль padding а также width.

Для получения дополнительной информации о размерах коробок вас может заинтересовать «Понимание размера коробки».

html {
  box-sizing: border-box;
}

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

Удаление полей и отступов

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

/* Reset margins and paddings on most elements */
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
p,
pre,
blockquote,
figure,
hr {
  margin: 0;
  padding: 0;
}

Списки

Я использую неупорядоченные списки во многих ситуациях, и мне не нужен disc стиль в большинстве из них. Вот, я поставил list-style никому. Когда мне нужно disc стиль, я установил его вручную на конкретный <ul>

/* Removes discs from ul */
ul {
  list-style: none;
}

Формы и кнопки

Браузеры не наследуют типографику для форм и кнопок. Они установили font к 400 11px system-ui. Я нахожу это ошеломляющим и странным. Мне всегда приходится заставлять их наследовать элементы-предки вручную.

input,
textarea,
select,
button {
  color: inherit; 
  font: inherit; 
  letter-spacing: inherit; 
}

Разные браузеры по-разному оформляют границы элементов форм и кнопок. Мне не нравятся эти стили по умолчанию, и я предпочел бы установить их на 1px solid gray.

input,
textarea,
button {
  border: 1px solid gray; 
}

Я сделал еще несколько настроек кнопок:

1. Установите отступ кнопки на 0.75em а также 1em потому что по моему опыту они кажутся разумными значениями по умолчанию.
2. Удален по умолчанию border-radius это применяется к кнопкам.
3. Принудительный цвет фона должен быть прозрачным

button {
  border-radius: 0; 
  padding: 0.75em 1em;
  background-color: transparent;
}

Наконец, я установил pointer-events: none к элементам внутри кнопки. Это в основном используется для взаимодействия с JavaScript.

(Когда пользователи нажимают что-то в кнопке, event.target это то, на что они нажали, а не кнопка. Этот стиль облегчает работу с click события, если внутри кнопки есть элементы HTML).

button * {
  pointer-events: none;
}

Медиа-элементы включают изображения, видео, объекты, фреймы и встроенные элементы. Я стараюсь, чтобы эти элементы соответствовали ширине их контейнеров.

Я также установил эти элементы в display: block потому что inline-block создает нежелательные пробелы внизу элемента.

embed,
iframe,
img,
object,
video {
  display: block;
  max-width: 100%;
}

Столы

Я редко пользуюсь таблицами, но иногда может быть полезно. Вот стили по умолчанию, с которых я начну:

table {
  table-layout: fixed;
  width: 100%;
}

Когда элемент имеет hidden атрибут, они должны быть скрыты от просмотра. Normalize.css уже делает это за нас.

[hidden] {
  display: none;
}

Проблема этого стиля в его низкой специфичности.

я часто добавляю hidden к другим элементам, которые я оформляю с помощью класса. Специфичность класса выше атрибута, и display: none свойство не работает.

Вот почему я предпочитаю подниматься [hidden]специфика с !important.

[hidden] {
  display: none !important;
}

Носкрипт

Если для работы компонента требуется JavaScript, я добавлю <noscript> тег, чтобы сообщить пользователям (если они отключили JavaScript).

Это создает стили по умолчанию для <noscript> ярлык.

/* noscript styles */
noscript {
  display: block;
  margin-bottom: 1em;
  margin-top: 1em;
}

Подведение итогов

Каждый начинает свои проекты по-разному. Пожалуйста, не стесняйтесь использовать любой из упомянутых мною стилей. Вот Репозиторий Github моих личных сбросов CSS.

Есть ли у вас какие-либо рекомендации, которые помогут улучшить этот файл сброса CSS? Если вы это сделаете, не стесняйтесь протянуть руку и дайте мне знать!

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