Время от времени фронтенд-разработчик, наконец, начинает новый проект со всеми новыми идеями и новыми вещами, которые нужно изучить, и время от времени перед ним стоит совершенно безобидная проблема: базовые стили 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; }
И более привлекательный, гораздо более управляемый веб-сайт: