Является ли склонным к ошибкам использование селекторов атрибутов ID (не #id) в элементах тела для CSS-файлов пространства имен?

Я использую Sass для компиляции моих таблиц стилей SCSS в один assembled.css уменьшить HTTP-запросы. Чтобы создать пространство имен для отдельных страниц для стилизации, я обертываю каждый CSS-файл для каждой страницы в селекторе идентификаторов для этой страницы <body> элемент - например:

body#support {

    .introduction {
        @extend %dropcap;
    }

}

В nanoc (с использованием ERB) у меня есть помощник, который назначает каждому телу страницы уникальный идентификатор, разделенный тире, на основе структуры папок HTML, поэтому корневые страницы будут #support или же #productsв то время как их подстраницы будут иметь такой идентификатор, как "#products-giantspacelaser".

Я хочу создать набор правил SCSS, которые применяются только к этим подстраницам "продуктов" (не включая корневой уровень). #products сама страница). Есть ли что-то, что я должен обратить внимание на специфичность, если я использую селектор атрибута вместо идентификатора для этого, как показано ниже?

body[id^="products-"] {

    .introduction {
        @extend %dropcap;
    }

}

Я действительно не хочу использовать !important, но я хочу убедиться, что эти правила для конкретной страницы имеют прецедент над стилями, установленными в партиале '_base.scss', который предшествует им в порядке @import. Поскольку у меня есть полный контроль над структурой HTML, я также теоретически мог бы использовать Erb в файлах Sass для замены в списке идентификаторов через запятую, например:

body#products-giantspacelaser,
body#products-laboratorycamouflage,
body#products-resurrecteddinosaur {

    .introduction {
        @extend %dropcap;
    }

}

- но это выглядит довольно не элегантно. Заранее спасибо.

РЕДАКТИРОВАТЬ:

Я написал свои другие стили действительно каскадным способом:

  1. Нормализовать CSS
  2. HTML5 Boilerplate и мои собственные разумные правила дома
  3. Библиотеки CSS (в данном случае Bourbon & Neat)
  4. "_Source.scss", который, в свою очередь, импортирует свои собственные миксины и селекторы-заполнители.
  5. "_Base.scss", который стилизует структуру макета по умолчанию для каждой страницы.
  6. Серия файлов.scss для индивидуальной стилизации содержимого каждой страницы - и, как я надеялся, при необходимости переопределяет решения макета base.scss (если страница требует серьезного отклонения от нормы).

В любом случае, эти отдельные таблицы стилей страницы должны были бы определенно иметь более высокую специфичность, чем предыдущие значения по умолчанию, так как они были написаны для определенной цели и страницы. Я специально не использую селекторы идентификаторов, за исключением одной конкретной цели - таблиц стилей пространства имен.

Используя, скажем

.services .sharktraining .introduction .disarmingJoke {}  --0,0,4,0

в "_base.scss" будет превосходить

body[id^="products-"] .disarmingJoke {}                   --0,0,2,1

в дальнейшем каскадном "products.scss", не так ли? (Примечание: я знаю, что использование четырех классов - ужасная практика, я просто не хочу беспокоиться о том, что что-то ускользнет через пространство имен).

Я полагаю, есть еще один - очень грязный - вариант: повторить body[id^="products-"] много раз, чтобы просто превзойти численность даже самого конкретного правила силы класса.

Источник

1 ответ

Решение

Это будет зависеть от того, как вы написали свои другие стили и должны ли они иметь приоритет (см.: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/).

Если вы точно сопоставите селектор, но префикс одного из них будет с вашим селектором тела, префикс будет достаточно конкретным, чтобы иметь приоритет независимо от того, что (даже если порядок был обратным):

body[id^="products-"] .widget {
    color: green;
}

.widget {
    color: red;
}

.widget будет зеленым, потому что первый селектор более специфичен, чем второй.

Единственная проблема с использованием селекторов атрибутов по идентификаторам - это если вы заботитесь о IE6. Если вас это беспокоит, библиотека IE7 JS Дина Эдвардса может вам помочь: http://code.google.com/p/ie7-js/

Если изменение способа прикрепления информации о странице к элементу body является опцией, я бы рекомендовал, чтобы родительский каталог был идентификатором, а дочерние страницы - классами:

<body id="products" class="giantspacelaser" />

Таким образом, вы можете сохранить специфику идентификатора:

// excludes the body#products page, which wouldn't have a class set at all
body[class]#products { 
    // styling here
}
Источник
Другие вопросы по тегам