Это перевод статьи Оханса Эммануэля, который уже много лет работает в сфере разработки веб-сайтов и сервисов. Его главное увлечение — CSS, здесь он чувствует себя как рыба в воде. Свою любовь к делу и знания Оханс охотно передает читателям.
Сегодня мы поговорим о том, как можно сделать CSS-стили ужасными, само собой, решая прямо противоположную задачу — научиться создавать красивый и чистый CSS. Материал подойдет в основном начинающим веб-дизайнерам и разработчикам, хотя в качестве напоминания статья пригодится и их более опытным коллегам.
Skillbox рекомендует: Образовательный онлайн-курс «Профессия Веб‑разработчик».
Напоминаем: для всех читателей «Хабра» — скидка 10 000 рублей при записи на любой курс Skillbox по промокоду «Хабр».
Зачем нужны комменты? Их пишут только джуниоры!
Комментарии к коду нужно оставлять всегда, каким бы хорошим специалистом вы ни были. Уже через полгода можно забыть, что к чему, и потом долго разбираться в нюансах. Потерянное время — это пропавшие деньги и испорченное настроение.
Конечно, комментировать хочется далеко не всегда, но делать это все же необходимо. Особенно это актуально для тех участков кода, где используются какие-то оригинальные/неочевидные приемы.
Не заставляйте своих коллег или себя самого из будущего страдать, не забывайте о комментариях. О необходимости комментирования говорят все, но, к сожалению, далеко не всегда разговоры означают выполнение этого правила.
Чем сложнее селекторы, тем лучше
О, да! Вы только-только выучили CSS (основы) и теперь чувствуете себя королем мира. Самое время показать этим несчастным, которые вас окружают, насколько сложными могут быть селекторы.
Плохой ход.
Если использовать слишком много селекторов, вы чрезмерно усложните CSS, тесно связав все это с HTML-структурой своего сайта или сервиса.
Если впоследствии изменится разметка, придется менять и CSS. И снова мы теряем время, деньги и любовь коллег.
Выход есть: просто используйте классы и живите полной жизнью. Чем проще структура, тем легче с ней работать. В CSS, как и во многих других сферах, актуальна поговорка «Краткость — сестра таланта».
Производительность? Она тоже не нужна
Крупная ошибка — забывать о производительности сайта или сервиса. Если о ней не позаботиться, последствия могут негативным образом повлиять на весь онлайн-бизнес компании, для которой сайт создается, а следовательно, и на вашу репутацию.
Не заставляйте пользователей нервничать, сделайте всё сразу хорошо.
То, что компьютеры сейчас очень мощные, не оправдание: код все равно нужно оптимизировать, и CSS не исключение. Простота селекторов должна ставиться во главу угла. А понимание того, как работает браузер при поиске очередного селектора, здорово помогает делу.
Вы, скорее всего, просматриваете селекторы слева направо. А вот браузер поступает наоборот, поэтому он может оставить без внимания селекторы, которые обнаруживаются последними. Заботьтесь о браузере как о самом себе.
Посмотрите на пример CSS на картинке выше. Браузер в этом случае проверит наличие всех элементов (*), а также то, являются ли они дочерними селекторами body.
<source lang="css">body * {
...
}Но почему? Дело в том, что практически любой видимый элемент в идеале является дочерним элементом . Проверка получается бессмысленной и неэффективной.
Плохо удается именование CSS-стилей? Делаем как бог на душу положит
Именование может быть сложным для некоторых из нас, но это не значит, что нужно сдаваться еще на берегу.
Честно говоря, я сомневаюсь, что в каких-то ситуациях стоит использовать одну-единственную букву в качестве наименования класса.
.u {
font-size: 60rem;
}Ну хорошо, а что, если взять суперподробное именование?
.former-black-now-red-paragraph {
color: red;
}Ну тоже так себе, согласитесь.
В то время как второй вариант может казаться приемлемым, повторное использование класса будет сложной задачей. К примеру, если абзац захочется сделать иного цвета, то такое имя будет выглядеть весьма странно.
Вообще лучше всего называть классы по содержимому либо же по картинке-элементу, если это нагляднее. В целом, пробуйте называть классы осмысленно, но не будьте перфекционистом в этом деле. Все хорошее должно быть в меру.
Я хочу использовать классы везде, это же так… классно!
Да, классы — это круто, многим они нравится. Но, как и все остальное, их стоит использовать только там, где это нужно.
Если вы видите, что несколько классов будут постоянно использоваться вместе, просто сгруппируйте их в отдельный класс. Как вы будете это делать — вещь сугубо индивидуальная. Но если вы пишете большое приложение, попробуйте группировать классы, а не иметь огромное их количество на каждом из элементов.
И да, избегайте использования модульных классов, когда это возможно.
Я CSS-перфекционист. SASS, LESS — не для меня!
Все мы своего рода перфекционисты. Если есть такая возможность, стоит использовать чистый CSS без решений вроде CSS-in-JS (отличное решение для некоторых React-проектов).
В случае, если вы разрабатываете большое приложение с тоннами элементов, лучше используйте CSS-препроцессор, что позволит сделать разработку более интересной задачей, времени на решение которой уйдет меньше, чем в случае работы с чистым CSS.
Не нужно, конечно, и становиться фанатиком препроцессоров, используя их в каждом удобном и не очень случае.
Ставим !important везде и всюду
Ох уж этот CSS, он никогда не работает. Давайте исправим проблему при помощи десятков и сотен !important, разбросанных там и сям! Отличная идея, правда?
На самом деле — нет. Большое количество !important делает ваш CSS слишком нагруженным и сложным. Вообще говоря, это правило было создано во второй половине девяностых, чтобы помочь веб-дизайнерам переопределять существующие стили. !important дает браузеру понять: нужно забыть обо всем и использовать только «усиленный» фрагмент. Но если использовать его во всех случаях, ленясь решать задачу иным способом, можно получить немаленькую проблему.
Лучше всего использовать !important на уровне свойства, а не селектора, причем тогда, когда вы корректируете код сторонних разработчиков либо же инлайновые стили. Слишком частое использование !important нарушает один из главных механизмов CSS — специфичность.
Ну и напоследок сторонникам хороших приемов написания CSS можем посоветовать:
- Использовать в CSS структуру контента, то есть некое подобие оглавления, что поможет в случае необходимости находить нужные участки кода.
- Сделать CSS читабельным, то есть создавать чистые наборы правил, благодаря чему CSS будет легко читать.
- Отделять стили jQuery-плагинов.
- Использовать файл сброса стилей, что позволяет уменьшить разницу отображения в разных браузерах с получением общего внешнего вида.
- Добавлять CSS-анимацию в последнюю очередь.
Skillbox рекомендует:
- Онлайн-курс «Python-разработчик с нуля».
- Практический годовой курс «PHP-разработчик с нуля до PRO».
- Образовательный онлайн-курс «Профессия Java-разработчик».
Автор: skillbox
