background-color: var(bc);
yazmak ile
background-color: #EDEDED;

yazmak arasında hiç bir fark yok (boyut olarak);

Baştaki @variable tanımlaması da cabası oluyor ayrıca oradan oraya yönlendirme de mantıklı değil. Ayrıca doğrudan rengi okuması varken değişkene yönlendirmek mantıksız, yani kullanmamak daha mantıklı.

Belki daha karmaşık konularda kullanılabilir fakat verilen örneğe göre çok gereksiz gözüküyor.

There are two common mistakes that people make when grouping selectors. The first is forgetting to write each selector in full. For example, if you are trying to target two elements within the same containing block, and with the same ID, chances are you will probably want them to be written in the same way. So, this is probably wrong:
#maincontent p, ul { border-top: 1px solid #ddd; }
The correct group selector would more likely be:
#maincontent p, #maincontent ul { padding-top: 1em; }

Merak ettiğim birşey var. Bu ipucu bütün tarayıcılarda sorunsuz çalışıyor mu? Deneyen oldu mu?