войные классы и IE6

Одними из самых приятных селекторов в CSS могли бы стать множественные классы. Стилизация в зависимости от цепочки классов, прописанных одному элементу могла бы быть очень заманчивой, однако, как всегда, всё портит IE6.

Собственно, сразу к делу. Вот пример применения нескольких классов. В нормальных браузерах первые две строчки будут иметь зелёный фон, тогда как IE6 — красный. Это возникает за счёт того, что:

Таким образом, может создаться впечатление, что в IE6 селектор срабатывает как надо: например, имея .class1 {…} .class1.class2 {…} и проверяя меняется ли поведение блока при добавлении второго класса, — в IE6 второй селектор будет перекрывать первый только потому, что он идёт вторым.

Как вывод: нельзя пользоваться такими селекторами и, в случае необходимости, лучше создать дополнительную обёртку, в которой уже продублировать все классы изначального элемента, после чего в селекторе указывать классы через пробел. К сожалению, для тройных и четверных цепочек придётся создавать новые и новые обёртки, так что лучшим выходом будет отказ от использования соединения классов.

Однако, иногда полезно определять для всей страницы какой-то класс, на котором потом будет основываться дальшейшая вёрстка. Часто таким образом для BODY прописывают множество классов. Но если необходимо применять стили сообразно двум или трём классам, действующим одновременно, имеет смысл создать один-два обрамляющих дива для всей страницы и продублировать классы в них. Это немного увеличит размер HTML, но сократит CSS, кроме того, сделает работу с каскадными таблицами стилей удобнее.