Полезные советы по CSS
https://t.me/frontend_1
Существуют определенные правила CSS, которые можно найти в любом учебнике. Но есть также правила CSS, которые вы не найдете в пособиях, но столкнетесь с ними, как только начнете писать код. Здесь вы найдете советы как для новичков, так и для более продвинутых пользователей.
Цвета
Когда вы используете в проекте огромное количество цветов, сложно не запутаться, так как порой отличия бывают незаметными: возьмите #3426D1 и #3426D2. Для решения этой проблемы достаточно использовать элементарные классы цветов в CSS или SCSS.
Ограничив количество используемых цветов, вы сможете добиться соответствия цветового фона заднего и переднего планов.
Другая проблема — баги при использовании альфа-канальных цветов. Обычно такие цвета задаются с использованием функций rgba() или hsla(). Цвет, заданный со значением альфа-канала, отличным от 1, является полупрозрачным. Воспринимаемый цвет теперь меняется в зависимости от того, что находится на заднем плане. Если цвет вам нужен таким, каким он выглядит на белом фоне, лучше использовать hex-значение.
Некоторые функции, lighten() в SASS например, сгенерируют полупрозрачный цвет, поэтому лучше придерживайтесь точно закодированных значений.
Инструмент CSS Grid Layout
CSS Grid очень хорошо поддерживается (возвращаясь к IE10) и позволяет организовывать контент без добавления контейнерных элементов наподобие Bootstrap-row или Bootstrap-col. Дизайнеры часто работают с 12-колонной сеткой, и CSS-фреймворки следуют этому. Но сетки, как и интервалы, должны организовывать контент, а не ограничивать его. Сетки не должны быть заранее заточены под определённый формат. Не стоит целиком полагаться на сетку.
Выравнивание текста
text-align используют для выравнивания не только текста, но и других элементов. Но для этого лучше подходит flexbox. В некоторых языках, которые пишутся справа налево или вертикально, свойства left и right могут работать некорректно. В случае с justify проблемы могут возникнуть с языками, где есть орграфы. Также он может доставить неудобства людям с дислексией. Каждый из этих вариантов решается flexbox. Поэтому для таких случаев всегда используйте его.
Свойство outline
Границы выделенных элементов — это то, как браузер взаимодействует с элементами, находящимися в фокусе. Хотя дефолтные границы достаточно хороши, всё равно их часто либо изменяют, либо вообще убирают, просто потому что они не сочетаются с дизайном. И если вы всё-таки решили не использовать оригинальный outline, запомните: пока вы не заменили свойство чем-нибудь другим, не удаляйте и не аннулируйте его.
Border-box для всего
Многие новички не знают о свойстве box-sizing, но оно действительно важно. Наилучший способ понять, что это — это посмотреть его два значения:
- content-box (по умолчанию) — когда мы задаем ширину/высоту элемента, это просто размер его содержимого. Все отступы и границы находятся на его вершине. <div> имеет ширину 100 и отступ 10 наш элемент займет 120 пикселей (100 + 2*10)
- border-box — отступ и граница входят в ширину/длину. div с width: 100px; и box-sizing: border-box; займут 100 px ширины, и неважно, какие границы или отступы добавлены
Установка border-box для всех элементов намного упрощает оформление всего, так как не приходится все время считать.
Переходы и анимация
transitions и animations в CSS отличаются от opacity и transform тем, что после их выполнения браузер заново перерисовывает всю страницу. На мощном компьютере это никак не заметно, но на простеньких телефонах и ноутбуках всё выглядит криво. Плохая анимация смотрится хуже, чем её отсутствие.
Сброс CSS
Несмотря на то что ситуация с годами сильно улучшилась, остается множество вариантов поведения браузеров. Наилучший путь решения — это применять сброс CSS, который задает универсальные значения по умолчанию для всех элементов, позволяя вам начать работу с чистого листа, результат которого будет везде одним.
Существует несколько библиотек, таких как normalize.css, minireset, и ress, которые делают это очень хорошо, исправляя все возможные несоответствия браузеров.
Непрозрачность
Устанавливая opacity на ноль, вы фактически не скрываете элемент от инструментов специальных возможностей. Он до сих пор находится в документе, и его может найти любой желающий. Это свойство действительно требуется только в двух случаях: когда элемент появляется в поле зрения (быстрое изменение opacity c 0 до 1) и при стилизации наложения диалогового окна (таким образом содержимое под окном ещё немного заметно). Избегайте наложения полупрозрачных слоёв, так как уровень прозрачности (opacity) накапливающийся. Контент, находящийся под двумя элементами с opacity: 50%, будет выглядеть так, будто он находится под одним элементом с opacity: 25%.
Изображения как фон
Добавляя картинки к вашему проекту, особенно если он будет адаптивным, используйте тег div со свойством CSS background вместо элементов. Это может показаться совершенно бесполезным, но на самом деле это значительно облегчает настройку изображений, сохраняя их изначальный размер и соотношение сторон. И все благодаря background-size, background-position и другим свойствам.
Caniuse – ваш друг
В разных браузерах по-прежнему наблюдается много несоответствий в совместимости. Используйте caniuse или подобный сервис, чтобы проверить, широко ли поддерживается то, что вы используете, если вам нужны префиксы или если они вызывают какие-либо ошибки на определенной платформе.
Хотя простой проверки caniuse недостаточно. Вам также необходимо выполнить тесты (вручную или через сервис), так как иногда макеты разбиваются без видимых причин. Знание предпочтительных браузеров вашей пользовательской базы также очень помогает, поскольку вы можете видеть, где важна поддержка.
Валидация
Валидация CSS может быть не так важна, как валидация кода HTML или JavaScript, но его запуск с помощью CSS Linter может быть очень полезным. Он скажет вам, совершили ли вы какие-либо ошибки, предупредит вас о ваших промахах и даст общие рекомендации по улучшению кода.
Как и minfiers и autoprefixers, существует множество бесплатных валидаторов:
- Онлайн-инструменты: W3 Validator, CSS Lint
- Текстовые редакторы: Sublime Text, Atom
- Библиотеки: stylelint (Node.js, PostCSS), css-validator (Node.js)
Библиотеки
Сообщество CSS огромно, и здесь постоянно появляются новые библиотеки. Они предназначены для многих целей, от малых снипетов до невероятных фреймворков, необходимых для адаптивных приложений. Большинство из них с открытым исходным кодом.
В следующий раз, когда вы столкнетесь с проблемами с CSS, попробуйте найти решение на GitHub или CodePen до того, как перепробуете все свои фишки.
Не используйте !important
Серьезно, не надо. То, что может стать быстрым решением, в результате окажется причиной неоднократного переписывания. Вместо этого лучше найдите селектор CSS, который не работает, и измените его. Единственная допустимая ситуация использования !important - это когда вам необходимо переопределить внутренние стили HTML, что само по себе является тем, чего нужно избегать.
Конечно, это лишь небольшая часть советов по CSS, которая все же может значительно облегчить разработчику жизнь.