Советы по написанию современного CSS

Для начинающих

«Делай настолько просто, насколько возможно. Но не проще!» (в IT это еще называют KISS).

Используйте flexbox

Ибо это первая технология для расположения блоков, не являющаяся костылём. Да-да, всего 21 год и у нас есть действительно удобный механизм для раскладки блоков.

Но помните ряд «мелочей»:

  • Кроссбраузерность flexbox не идеальна. В связи с реализацией в днищебраузере 10 старой версии спецификации, можно считать, что flexbox — это IE11+.
  • Правила margin для флекс-потомков не «схлопываются» как в обычном потоке.
  • Правило z-index работает при любом значении правила position .
  • Правила vertical-align , float перестают работать во флекс-контексте.
  • CSS-колонки перестают работать во флекс-контексте.
  • Флексбокс не без багов (перевод)

Для селекторов используйте английский и разделители -

Это общепринятая практика, ускоряющая восприятие кода. Не используйте camelCase или символы подчеркивания для разделения слов в имени селектора.

Осторожнее с сокращениями слов

Избыточные сокращения дают неочевидность (затрудняют восприятие и модификацию). Используйте частые слова, несколько распространенных сокращений.

Помните о «весе» селекторов

Есть селекторы «слабые», а есть помощнее. Всегда помните про «вес» селектора.

Не пишите CSS, используйте препроцессоры

Это удобно, быстро, дает возможность разделять (и властвовать) кодовую базу, легче её поддерживать. Самым распространенным является Sass. Наиболее близким к CSS — LESS. Знать и пробовать стоит оба.

Stylus — самый молодой и самый мощный, но распространен мало. К сожалению, сейчас у этого инструмента нет разработчиков и он не развивается. Последние изменения в репозитории разработки датированы летом 2016 года.

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

См. так же: Как работать с CSS-препроцессорами и БЭМ

Не набирайте стилевые правила, используйте Emmet

Принцип прост (я не верю, что вы не знаете о нём, на самом деле): набираем аббревиатуру(ы), жмем кнопку разворачивания аббревиатуры (обычно, TAB) и получаем правила со значениями.

Шпаргалка

Не пишите вендорные префиксы

Уже давно есть Автопрефиксер, расставляющий префиксы за вас. Используете автоматизацию — ставьте его как пакет и подключайте в процесс обработки стилей. Не используете автоматизацию — есть он-лайн вариант: autoprefixer.github.io.

Пишите валидный код

Пока не уверены в правильном наборе, используйте валидаторы (встроенные в редактор кода, к примеру).

Автоматизируйте всё, что можно

Параллельно с улучшением навыка использования CSS, изучайте способы автоматизировать рутину. Главные помощники тут — системы сборки и таск-раннеры. Начать можно с изучения gulp.

Всегда проверяйте в Safari и IE

Именно в них будет больше всего проблем. Увы, первый для OSX, а второй для Windows. Ставьте виртуальные машины или используйте вебсервисы.

Выберите CSS-сброс/нормализатор/собственный вариант

CSS-сброс был популярен лет 5 назад, потом мы перешли на нормализатор. Сейчас же, для проектов без поддержки старых браузеров можно использовать что-нибудь попроще и свое собственное, как поступили авторы самого известного фреймворка Bootstrap (в 4-й версии отказались от normalize.css в пользу своего reboot).

Меняйте box-sizing правильно

Наиболее безопасно указать на html определить его как box-sizing: border-box; и потом для всех элементов указать наследовать его. Так можно будет быстро переопределить это правило для какого-либо родителя.

Подключайте и используйте шрифты правильно

Выбирайте форматы шрифтов, исходя из кроссбраузерности проекта, проверяя поддержку формата шрифта на caniuse.com. Для проектов с IE9+ будет достаточно WOFF, но для старых Андроидов потребуется и TTF, а для новых браузеров лучше подключить и WOFF2 (выигрывает в размере файла в сравнении со всеми прочими). Очередность подключения: WOFF2, WOFF, TTF.

Подключая несколько файлов начертаний, не умножайте названий шрифта. Очень странно иметь на проекте шрифты с названиями «PT Sans» и «PT Sans Bold», это должен быть шрифт «PT Sans», плотность которого указывается в стилях правилом font-weight .

Помните, что шрифты начинают подгружаться относительно поздно (только когда браузер поймёт какие из них реально нужны, сложив DOM и CSSOM в модель визуализации), учтите, что есть такие явления как FOUT, FOIT и даже FOFT.

Подробнее и с примерами кода про подключение шрифтов — в моей статье.

Не деформируйте изображения

Для фоновых картинок в блоках есть прекрасное правило, масштабирующее изображение так, чтобы оно вписалось в длинную сторону блока своей короткой стороной без искажения пропорций — background-size: cover (кроссбраузерность — IE9+, отлично сочетается с background-position: center ).

Для картинок, вставляемых на страницу тегом img можно предусмотреть фиксированный размер и масштабирование без деформации, задав размер и им правило object-fit: cover (нет поддержки в IE и Edge, но есть полифил, обеспечивающий функциональность этого CSS-правила).

Жестко соблюдайте кодгайд

Красивый и консистентный код быстрее читается и понимается, в нем лучше видны ошибки. Кодстайлов довольно много, мне ближе всего те, в разработке которых я участвовал сам: Руководство по написанию кода EpicSkills и Стиль кода Академии HTML.

Используйте в анимации transform или opacity

Любая анимация на странице — это перерисовка некоторой части страницы (всей страницы в наихудшем случае). Чем большая область перерисовывается, тем сложнее приблизиться к идеалу в 60 кадров в секунду, анимация может выглядеть «дёрганой».

По возможности, при анимации меняйте не отступы/размеры, а правила transform или opacity , подсчет таких изменений страницы затронет наименьшие по размеру области и будет выполнен не на центральном процессоре (который может быть занят чем-то другим), а на графическом.

Изучайте фреймворки

Подходы к стилизации, используемые в распространенных фреймворках (Bootstrap, Foundation) ощутимо прокачают вас как специалиста.

Изучайте методологии методологию БЭМ

У CSS есть «вагон» родовых травм, преодолеть которые полностью или частично можно с использованием методологии. Выбрать можно любую, главное чтобы это был БЭМ, ибо на данный момент ничего лучше (в состоянии «готово к использованию») не существует. Прочие даже близко не дотягивают.

См. так же: Как работать с CSS-препроцессорами и БЭМ

Избегайте !important

Это не запрет. Увы, иногда без !important не обойтись (при поддержке старинного говнокода в длительно существующем проекте). Запрет тут только один: не «лечите» свои же баги дописыванием !important , ибо это чёткий признак профана.

Используйте СКВ

СКВ — система контроля версий. Идеальна для текстовых файлов, коими являются CSS-файлы.

Изучите git и используйте его. Это как сохранения в играх, но для работы. Удобный бекап, история изменений, возможность откатиться к ЛЮБОМУ сохраненному состоянию, удобная работа в команде и много чего ещё.

Думайте о переполнении и недополнении

ВСЕГДА думайте о переполнении блока текстом (кнопка, название товара в карточке) или картинкой (внутри блока может оказаться картинка не тех пиксельных размеров, которые использовались при верстке). Переполнение возможно и вложенными блоками (галерея, неизвестное количество превью фотографий).

Не используйте для стилизации id

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

Идите по пути mobile-first

Стилизуйте мобильное представление адаптивной страницы, а потом дописывайте стилевые изменения с помощью @media (min-width: ...) . Обычно, это быстрее и логичнее обратного пути. Встречаются, впрочем, и исключения, когда, к примеру, главное меню для мобильных сильно отличается от «настольного» представления.

Не оптимизируйте CSS до старта проекта

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

Создайте свой стартовый проект

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

Пример стартового проекта с автоматизацией.

Мелкие фоновые изображения вставляйте в CSS в виде data-uri

Это способ преобразовать любой файл «в строку» и избежать запроса на сервер за картинкой (сервис для преобразования). Особенно актуально при отказе от спрайтов.

Следите за хорошими практиками и трендами

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

Оптимизируйте свою работу в редакторе

Помимо Emmet, нужно освоить:

Понравилась статья? Ставьте лайк, делитесь в соц. сетях или купите мне кофе.