Ребенок правило селектора в CSS

Question

Я прочитал «Writing efficient CSS»

правило категория тегов не должно содержать селектор дочернего

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

BAD 
treehead > treerow > treecell {…} 

GOOD 
.treecell-header {…} 

Но в SCSS многие люди пишут что-то вроде этого:

#main { 
    width: 97%; 

    p, div { 
    font-size: 2em; 
    a { font-weight: bold; } 
    } 

    pre { font-size: 3em; } 
} 

В SASS документации - http://sass-lang.com/documentation/file.SASS_REFERENCE.html

Кто прав? Что лучше?

Answer 1

Спецификация css верна, вы не должны устанавливать селекторов.

Вы можете сделать это на SCSS, потому что он будет скомпилирован в отдельные селекторы классов.

Например, посмотреть описание на родительском гнездовой отбор:

... если у вас есть глубоко вложенной правило, родительский селектор будет полностью решен до & замещается

http://sass-lang.com/documentation/file.SASS_REFERENCE.html#referencing_parent_selectors_

Answer 2

Вложенные .scss теги не распространяются на дочерний селектор >.

#main { 
    p { 
     font-family:arial; 
    } 
} 

расширится:

#main p { 
    font-family:arial; 
}