Есть ли способ минимизировать выбор по общей иерархии в CSS?

Question

Короче говоря, я хотел бы, чтобы превратить это:

#WRITE-USER input[type=text], 
#WRITE-USER input[type=password], 
#WRITE-USER input[type=email], 
#WRITE-USER textarea, 
#WRITE-USER select { 
    /* common properties */ 
} 

В то вроде этого:

#WRITE-USER { 
    input[type=text], input[type=password], input[type=email], textarea, select { 
      /* common properties */ 
    } 
} 

Есть ли вообще это делать?

Спасибо за любую помощь.

Answer 1

Не в простом CSS, но вы можете использовать следующую реализацию CSS, которые делают именно это:

http://lesscss.org/

http://sass-lang.com/

Менее CSS является большим, так как он работает в самом, вы браузере могут даже использовать переменные в вашем css и менять их на ходу с помощью javascript при нажатии кнопки.

Sass css лучше, если вы хотите скомпилировать его позже, и хотите скомпилировать css-сервер в nodejs в качестве примера.

Лично я предпочитаю меньше css, так как я могу легко объединить его с javascript для динамического изменения целых цветов с помощью одной цветовой переменной. Меньше css также можно минимизировать, как обычный css, так как это просто удаление пробелов и т. Д., Но сайту всегда нужно извлекать ресурс less.js, когда он не кэшируется, и меньше css не работает без включенного javascript.

Можно даже сделать это:

#WRITE-USER { 
    /* write-user styles */ 
    input { 
     /* input styles */ 
     &[type=text], 
     &[type=password], 
     &[type=email], { 
      //specific input type style, yes we can use single line comments now 
     } 
    } 
    textarea { 
     /* textarea style */ 
    } 
    select { 
     /* select style */ 
    } 
} 

Наиболее интересная и полезной функцией будет Примесь и переменными, не больше коды повторять: D

Answer 2

Не используя простой CSS. Для достижения этой цели вам необходимо использовать прекомпилятор, например , который позволяет использовать such syntax, а при компиляции получается простой старый неинфицированный CSS.