Пожаловаться

7 простых способов писать по-настоящему ужасный CSS

04 сентября 2018 в 11:35
12920
Пожаловаться

Все говорят, как писать отличные стили. Это здорово, но, возможно, было бы полезно посмотреть на ужасный CSS, чтобы понять, как делать не следует.

7 простых способов писать по-настоящему ужасный 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

Больше статей о CSS

12920

Комментарии

Рекомендуем

BUG!