Действительно ли это экономит много времени, чтобы иметь вложенные правила в CSS? (используя HAML или LESS)

Question

В настоящее время я так кодирую свой CSS:

Обычный CSS:

#content { color: white; background: black; }  
#content a { color: yellow; }  
#content p { margin: 0; }  
#content (etc...)  
#contnet (etc...)  
#content (etc...)  

(я всегда включаю родительский элемент, даже если в этом нет необходимости, поэтому я могу ориентироваться внутритаблица стилей)

Вот как это будет сделано в SCSS или LESS:

#content {  
  color: white;  
  background: black;  
    a { color: yellow; }  
    p { margin: 0em; }  
    (etc....)  
    (etc....)  
    (etc....)  
}  

Каковы некоторые преимущества и недостатки наличия правил вложения в CSS?

Answer 1

Ну, это действительно проще поддерживать.Допустим, вы просматриваете огромный CSS:

#content el1{}
#content el2{}
#content el3{}
...
#content el999{}

... и завтра #content меняется на # что-то еще.Вместо того, чтобы изменять 999 записей, вы должны изменить только одну!

#content{
  el1{}
  ...
  el999{}
}

Также легче читать и вынуждает вас использовать вложение.

Я вижу только положительные вещи, используя такие решения, какменьше или scss.Поэтому я предполагаю, что в конечном итоге это сэкономит вам время, но главное преимущество в том, что он произведет более чистый код DRYer.

Answer 2

Краткий ответ: ясность.

Гораздо проще читать второй пункт. Кроме того, он заставляет вас размещать все стили, связанные с #banner, в одном месте, а не разбросаны по всему листу.

Экономит ли это время? Я думаю, это зависит от ваших рабочих привычек. Это может.