Будьте осторожны с единицами измерения CSS em при использовании специфика?

У меня возникли проблемы с написанием поддерживаемого кода CSS, когда размер шрифта указан в единицах EM, а не в единицах PX. Я привык писать такой код CSS:

body {font-size: 12px;}
body .sidebar {font-size:11px;}
body .sidebar .loadmore {font-size:10px;}
body .sidebar .warning {font-size:13px;}

Идея состоит в том, что на многих страницах сайта есть много текста, размер шрифта которого должен составлять 12 пикселей. Я использую правила специфичности, чтобы переопределить размер шрифта 12 пикселей в особых областях сайта.

Допустим, я переписал вышеприведенный код следующим образом:

body {font-size: 12em;}
body .sidebar {font-size:11em;}
body .sidebar .loadmore {font-size:10em;}
body .sidebar .warning {font-size:13em;}

Если я заменил px на em в приведенном выше коде, я понимаю, что я теряю преимущество правил специфичности. Строка 3 кода будет интерпретироваться как «10 em из 11 em из 12 em», что совсем не то же самое, что «переопределить все предыдущие правила и использовать 10 em из (какое значение по умолчанию?)». Верно ли то, что я изложил?

editЕсли то, что я сказал, верно, то как написать правило размера шрифта, такое как «использовать размер шрифта X для всех элементов, но использовать размер шрифта Y на боковых панелях»?

5
задан Umber Ferrule 4 November 2014 в 12:26
поделиться