Как применить класс CSS к элементу с данным идентификатором, не изменяя элемент?

Question

У меня есть страница, которая выглядит как: <div id="header">...</div><div id="navigation">...</div> similar for body and footer.

Я хотел бы использовать подвесную систему для стиля страницы, все из которых, кажется, полагаться на предоставление дива упомянула класс на основе их представления. Но я не хочу этого делать (и не могу из-за способа создания разметки)

Есть ли способ сделать это, просто не кладя класс на divs? Я мог бы скопировать детали желаемого класса в таблицу стилей с указанием divs по id, но это кажется неправильным.

---

Редактировать, чтобы уточнить:

ОП хочет, чтобы избежать добавления класса = "grid_3" и т.д. в HTML, но и не хочет, чтобы добавить #header {ширина: 960px; margin: 0px; } (Который я думаю, что это хорошо) - Рори Фитцпатрик 3 часа назад

Точно, я не хочу, чтобы поместить информацию о представлении в моем HTML, но я надеялся, что я не должен был бы просто взять классы CSS, которые составьте систему сетки отдельно и примените соответствующие части (например, margin: 0px и width: 960px), так как это плохо с точки зрения обслуживания и повторного использования.

Итак, я рассмотрю автоматизированную систему для того, чтобы делать то, что мне нужно, если не будет ответа на вопрос о том, как применить класс CSS к элементу HTML с помощью css без добавления класса = "бла" элемент? Потому что это не похоже на сумасшедшую вещь, которую я хочу сделать со мной.

Answer 1

Ну, если вы используете план-CSS в вашей системе сетки можно использовать compress.rb назначить правила для данных рамочных п.н. классов к определенному селектору вашего выбора, как #footer или что там у вас. например, в вашем проекте YAML вы могли бы:

semantic_styles: # i dont think this is the right key definition but you get the idea 
    '#footer,#navigation': ['span-12','clearfix'] 
    '#footer': ['push-1'] 
    # etc... 

Тогда при вызове compress.rb на файл проект будет скатать необходимое заявление из массива селекторов по праву в селектор слева производящий:

#footer,#navigation{ /* composite delcalrations from .span-12 and .clearfix */} #footer {/* declarations from .push-1 */}

Но в целом это очень важно автоматизация копирования декларации в отдельный файл, который вы говорите, кажется, «неправильно». Но я имею в виду, кроме этого (автоматическое или ручное), я не вижу, какие могут быть возможные варианты.

Answer 2

Я не уверен, что понимаю вопрос. Почему вы не хотите добавлять стили в таблицу стилей и ссылаться на них по id?

#header{ 
    position:relative; 
    ... 
} 

Answer 3

Если у вас нет доступа к разметке, вы должны либо скопировать стили, ссылаясь на идентификаторы, либо, может быть, вы можете применить класс к идентификаторам с помощью javascript?

Answer 4

У меня такие же оговорки о сетчатых системах, добавление имен классов просто противоречит разметке разметки и стилю (но часто жертвуется производительностью).

Однако я не вижу, что не так, если вы устанавливаете правильные ширины столбцов и поля, используя собственный CSS. У вас может быть конкретный файл site.grid.css, содержащий только селектора и ширину/поля для сетки. Я думаю, что это нормально, это всего лишь способ использования CSS-переменных.Например, все элементы 3-колонок будут появляться под

/* 3-column elements, width 301px */ 
#sidebar, #foobar, #content .aside { 
    width: 301px; 
} 

Тогда вместо того, чтобы добавить class="grid_3" в свой HTML, вы просто добавить селектор в CSS.

Возможно, вам захочется сначала использовать имена классов, пока вы не удовлетворены макетом, а затем преобразуйте их в селектор CSS. Что лучше всего подходит для вашего рабочего процесса.