Используя отступы, чтобы сделать CSS более читабельным? (сделать родителей и детей более узнаваемыми в CSS)

Question

Я всегда руководствовался следующей структурой CSS:

#nav { }
#nav li { }
#nac li a { }

Эта структура четко говорит мне, кто является родителем и ребенком.

Но в недавней статье (я думаю, это был CSS Trick) кто-то сказал, что CSS читается справа налево. Таким образом, чем больше тегов у меня будет, тем медленнее будет (и иногда я думаю, что нет необходимости писать каждый тег, включенный в селектор).

Так что это может быть что-то вроде этого:

#nav { }
#special-link { }

где # special-link является дочерним элементом # nav . Я знаю, что это не большая проблема в простой таблице стилей, но в большой я всегда запутываюсь в том, кто является тем, кто является родителем и ребенком.

Другое решение будет:

#nav { }
   #special-link { }

Отступ

Как вы решаете эту дилемму CSS?

Answer 1

Я бы сказал, что вы оптимизируете преждевременно.Я прочитал ту же статью, и в конце он заявляет, что эти рекомендации были написаны более десяти лет назад, когда у компьютеров было намного меньше энергии под капотом.Теперь, я действительно не думаю, что это имеет большое значение - по сравнению с любым вашим JavaScript, ваш CSS будет молниеносным.Выберите опцию для чтения.

Один из способов сделать это быстрее, не жертвуя читабельностью, - это, как утверждает Крис Койер, избегать потомков в пользу детей.Поэтому вместо #nav li a используйте #nav > li > a.Это должно повысить скорость и фактически передавать больше информации, а не меньше.

Answer 2

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