Все говорят, как писать отличные стили. Это здорово, но, возможно, было бы полезно посмотреть на ужасный CSS, чтобы понять, как делать не следует.
Независимо от того, пишете ли вы ванильный CSS, или SASS, или CSS-in-JS, вам все равно будет полезно точно знать, как выглядит ужасный CSS.
Кто пишет комментарии? Никто
CSS не самый выразительный «язык программирования». Вы можете столкнуться со странным поведение браузера, пофиксить стили и уже через неделю благополучно забыть, что, как и для чего вы сделали.
Отложите свою гордость в сторону и спасите себя и товарищей по команде от стресса.
Если вы использовали неочевидную технику, или исправили браузерный баг, или просто считаете какой-то фрагмент недостаточно выразительным, напишите комментарий! Это совсем несложно.
Территория сложных селекторов
div > nav > ul > li > a {
color: #1200FF;
}
Да! Вы только что изучили CSS и чувствуете себя на вершине мира. Самое время продемонстрировать ваши селекторные мускулы.
Это ужасный CSS. Используя слишком много селекторов, вы делаете код непонятным и сложным для поддержки. Теперь стиль сильно зависит от структуры HTML вашего приложения.
Если разметка незначительно изменится, потребуется также внести изменения в CSS, что усложняет рабочий процесс.
Просто добавьте класс к элементу и живите дальше! Всегда отдавайте предпочтение простоте. Просто – почти всегда хорошо.
Производительность? Нет, не слышали!
/* разве это не одно и то же? */
body * { font-size: 12px; }
* { font-size: 12px; }
/* зачем нужна лишняя проверка? */
Очевидно, вам плевать на производительность и эффективность вашего продукта. Иначе вы не писали бы такой ужасный CSS с этими бессмысленными селекторами.
Конечно, компьютеры быстро развиваются, а браузеры продолжают оптимизироваться. Несмотря на это, предпочтение всегда следует отдавать простым селекторам. И понимание того, как браузер изучает DOM, чтобы найти нужные элементы, все еще важно.
Скорее всего, вы читаете селекторы слева направо. А вот браузер разбирает их справа налево. Если бы вы знали это, то, вероятно, были бы более снисходительны к браузерам. Они заслуживают вашей любви.
В примере выше браузер возьмет все элементы (*), а также проверит, являются ли они потомками body.
body * {
...
}
Но зачем? Почти каждый видимый элемент является потомком <body>. Это просто бесполезная неэффективная проверка.
Я не умею давать имена, поэтому даже не заморачиваюсь
Есть только две сложности в информатике: Выбор имен и…
Вы точно уже где-то это слышали. Подбирать имена сложно, но это не значит, что не нужно стараться.
Вряд ли есть ситуации, при которых имеет смысл использовать отдельные буквы в качестве классов.
.u {
font-size: 60rem;
}
А как насчет суперспецифичности?
.former-black-now-red-paragraph {
color: red;
}
Она тоже не приносит никакой пользы.
Возможно, вам кажется, что это имя имеет какой-то смысл, но оно нарушает все законы повторного использования, для которого классы и созданы. Имя из примера чересчур специфично для простой покраски шрифта в красный цвет.
Используйте осмысленные имена, но не переусердствуйте.
Я слышал, что классы классные! Добавлю их побольше!
<h1 class="font-light lowercase red-text margin-top-large no-small-padding"> I love Classes. Overuse them! </h1>
Классы замечательные, и все их любят. Но, как и во всем остальном, слишком много чего-либо – это, как правило, плохая идея.
Если несколько классов чаще всего будут использоваться вместе, просто сгруппируйте их в один, вместо того, чтобы использовать все сразу. Если вы пишете большое приложение, лучше иметь несколько более крупных классов, чем тонну мелких.
Я CSS-пурист. Я не использую SASS, LESS и т. п.
Определенно есть случаи, когда просто писать ванильный CSS – это правильно и здорово!
Однако если вы создаете большое приложение, с огромным количеством стилей, то CSS-препроцессор сделает разработку более легкой и интересной, а код – удобным для чтения и поддержки.
Нет необходимости использовать препроцессоры постоянно, но не отказывайтесь от них совсем.
Очень важные стили
.this-didnt-seem-to-work-before-now {
font-size: 12px !important;
}
Ужасный CSS, он никогда не работает! Как же это исправить? Да просто поставить !important везде, где нужно что-то переопределить!
Это довольно соблазнительный план для ленивого верстальщика, однако чрезмерное использование !important сделает ваш код совершенно неподдерживаемым.
В следующий раз, прежде чем повысить важность стиля, убедитесь, что вы не делаете этого только из-за того, что слишком ленивы, чтобы разбираться с каскадом.
Ужасный CSS на самом деле не так уж плох. Примите его таким, какой он есть.
Оригинал: How to write truly terrible CSS
Комментарии