Есть 2 пути с помощью которых вы можете упростить ваш HTML и CSS код, а так же использовать, более легкий способ для их управления.
Группирование
Вы можете дать, одни и те-же свойства ряда селекторов, без необходимости их повторения.
Например если у вас используется нечто подобное.
h2 {
color: red;}
.thisOtherClass {
color: red;}
.yetAnotherClass {
color: red;}
Например, вы можете легко использовать самостоятельные селекторы через запятую, записывая все в одну линию, это позволит вам применить одни и те-же свойства ко всему что будет указано выше.
h2, .thisOtherClass, .yetAnotherClass {
color: red;}Nesting
В структуре CSS обычно используется большое количество ID и селекторов. Это делается для реализации специфических свойств селекторов внутри других селекторов.
Наприме:
#top {
background-color: #ccc;
padding: 1em
}
#top h1 {
color: #ff0;}
#top p {
color: red;
font-weight: bold;}Это снимает необходимость использования дополнительных классов или же ID для определения тегов «p» и «h1«. Если рассмотреть HTML код, то выглядеть у вас это должно примерно так.
<div id="top">
<h1>Chocolate curry</h1>
<p>This is my recipe for making curry purely with chocolate</p>
<p>Mmm mm mmmmm</p></div>
Таким образом, разделение селекторов с помощью запятой и пробела, позволяет задавать нам свойства «h1 внутри ID top, будет цвета #ff0″ а текст с тегом «p внутри ID top, будет выделен жирным и окрашен красным«.
На деле это оказывается довольно сложной задачей, (потому что использование этих приемов может привести к более обьемному уровню (больше чем 2 тега как в примере) , этот тэг находится внутри того который находится на 1 уровень выше, который в свою очередь находится внутри 3-го) требующей достаточной практики.
