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