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

Большинство из вас, вероятно, писали какие-то сбросы в прошлом или использовали такие инструменты, как normalize.css, но даже после применения их фикстур в вашем проекте вы все равно получаете то же самое, потому что они на самом деле не сбрасывают много, но сделать его одинаковым в разных браузерах. То, что я собираюсь показать вам, — это пример некоторого кода копирования и вставки, который вы можете вставить в каждый из корневых css вашего проекта и быть намного счастливее, чем переписывать одни и те же стили снова и снова в надежде, что иногда эти основные одни будут хорошо играть и, наконец, будут полезны.

Проблема

Поскольку сейчас не 2010 год, ваш сайт, вероятно, не должен выглядеть так:

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

Поля и отступы по умолчанию

По умолчанию почти все элементы в html имеют свойства по умолчанию margin и padding. Из-за этого по умолчанию наш сайт выглядит хорошо, но когда мы пытаемся его немного изменить, мы сталкиваемся с тем, что мы должны пойти в MDN и проверить фактические размеры, затем рассчитать их и только потом применить наши стили. Это действительно громоздко, поэтому почти все люди делают эту простую вещь:

* {
  margin: 0;
  padding: 0;
}

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

Блочная модель CSS

Как вы, наверное, уже знаете, размер каждого элемента в CSS рассчитывается с помощью блочной модели. Это концепция, которая объединяет размеры полей, отступов и границ элемента для расчета общего объема пространства, которое элемент займет в DOM:

И по умолчанию в этом поведении есть небольшая загвоздка: без каких-либо вторжений ширина границы будет рассчитываться с отступом — вне элемента! Итак, скажем, у нас есть такой квадрат:

который имеет размер ровно 300x300 пикселей, как мы и хотели, но затем мы накладываем на него какую-то рамку:

  border: 10px solid red;

И свист! он становится размером 320x320px из-за комбинированного размера границ. И там нам нужно было бы уменьшить реальный размер коробки, чтобы она соответствовала параметрам, которые нам доверены.

Чтобы избежать этого, есть простое решение:

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

Установка свойства box-sizing на border-box для каждого элемента гарантирует, что граница вычисляется с отступами, т.е. внутри элемента.

Список точек

Хотя в некоторых случаях они могут быть полезны, в основном эти маркеры устарели, особенно если вы используете свой <ul> для других случаев, а не просто перечисляете все вертикально в одной строке.

Итак, мы приготовили наше опасное оружие, чтобы поразить эти круги:

li {
  list-style-type: none;
}

Но с этим есть загвоздка: доступность. Как оказалось, при таком стиле некоторые скринридеры не смогут правильно понять наш список как список и не уведомят об этом пользователя. Чтобы исправить это, мы можем с этого момента применить это к нашим спискам:

 <ul role="list">

Кнопки

Кнопки имеют две проблемы: внешний вид и интерактивность. Прежде чем я начну, можете ли вы ответить на простой вопрос: какой курсор отображается, когда вы наводите курсор на кнопку по умолчанию? Правильно — ПО УМОЛЧАНИЮ, эта штука:

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

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

Итак, всего:

button {
  background: none;
  border: none;
  cursor: pointer;
}

Теперь наша кнопка готова к стилизации и имеет красивый курсор при наведении на нее курсора!

Ссылки

Знаете ли вы самое лучшее о типографике в веб-разработке? Он наследуемый, что означает, что все, что вы применяете к родительскому контейнеру, будет передано его дочерним элементам следующим образом:

<div class="parent">
      <p>
        some text 
      </p>

      <p>
        some more text 
      </p>

      <p>
        some even more text
      </p>
    </div>

и

.parent {
  color: green;
  font-size: 1.4rem;
  font-weight: 600;
}

приведет к:

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

Но допустим, мы делаем какой-то веб-сайт с темами, и у нас есть тема, примененная к нашему телу, чтобы сделать любой другой цвет текста красным:

:root {
  --red-color: red;
}

body {
  color: var(--red-color);
}

По мере роста нашего проекта у нас, вероятно, будет две или три темы, и было бы очень легко переключать их, просто изменяя значение цвета элемента body. Итак, в чем проблема? Смотреть:

Этот парень Link действительно крут со своими трюками — он полностью избежал наследования нашего цвета текста по умолчанию, как мы и ожидали! И вдобавок к этому, у него есть свой неприятный акцент, который, вероятно, отпугнет людей. Итак, давайте починим его!

a {
  text-decoration: none;
  color: inherit;
}

Теперь, посещенные или активные, зависшие или нет, все ссылки на нашем веб-сайте сохранят свой собственный стиль:

Изображений

Вы обратили внимание на невероятный размер Райана Гослинга в нашем вступлении? Я бы сказал, что он должен быть немного меньше. Итак, как настоящий мужчина с правильными намерениями, я говорю, что его образ будет в <div> с классом ryan-box, который я бы стилизовал так:

.ryan-box {
  width: 30rem;
}

Что? Тот человек не дрогнул бы под такими нападками:

Итак, чего нам не хватает?

По умолчанию изображения в HTML имеют полный размер, если не указано иное. Итак, я могу решить эту проблему, сказав:

img {
  max-width: 100%;
}

И вуаля! Теперь он в порядке:

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

img {
  max-width: 100%;
  display: block;
}

Столы

Допустим, у нас есть некоторая таблица со случайным сообщением, закодированным в ней ChatGPT:

Помимо ужасного стиля без применения css, есть кое-что, о чем вы должны знать: монстры живут во тьме!

Если мы применим такую ​​окраску к нашей таблице, сделав таблицу темной, а ячейки светлыми:

table {
  background-color: black;
}

th, td {
  background-color: white;
}

Мы бы увидели, что есть некоторые вещи, которые обычный глаз не увидит:

Что это за строки? Откуда они? Как оказалось, базовая html-таблица имеет встроенные границы, но по умолчанию они прозрачны и, следовательно, невидимы для нас. Что еще более важно, эти вещи занимают место и фактически портят вашу работу, как box-sizing, упомянутое ранее. Так что мы можем сделать?

По этой простой строке:

border-collapse: collapse;

Убираем все границы из таблицы, чтобы они нам больше не мешали:

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

table {
  width: 100%;
  border-collapse: collapse;
}

Заключение

В итоге имеем не такой уж и маленький список свойств:

* {
  margin: 0;
  padding: 0;
}

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

button {
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style-type: none;
}

img {
  max-width: 100%;
  display: block;
}

table {
  width: 100%;
  border-collapse: collapse;
}

И более привлекательный, гораздо более управляемый веб-сайт:

Вот и все! Спасибо за прочтение!