Можем ли мы включить общий класс css в другой класс css?

Question

Я новичок в CSS. Мне просто интересно, возможно ли включить один общий класс в другой класс?

, например,

.center {align: center}; 
.content { include .center here}; 

я наткнулся рамки CSS - Blueprint. Нам нужно поместить информацию о позиции в HTML, например.

<div class="span-4"><div class="span-24 last"> 

Таким образом, мы поместим атрибут позиционирования внутри html вместо css. Если мы изменим макет, нам нужно изменить html, а не css.

Именно по этой причине я задаю этот вопрос. Если я могу включить .span-4 в свой собственный css, я не буду указывать его в своем теге html.

Answer 1

Необычно, хотя CSS говорит о наследовании, классы не могут «наследовать» таким образом. Самое лучшее, что вы действительно можете сделать, это следующее:

.center, .content { align: center; } 
.content { /* ... */ } 

Также я настоятельно рекомендую вам не делать «голых» селекторов классов, подобных этому. Используйте и удостоверение личности или тег и класс, где это возможно:

div.center, div.content { align: center; } 
div.content { /* ... */ } 

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

Answer 2

В стандартном CSS это невозможно сделать, хотя было бы неплохо.

Для чего-то подобного вам нужно использовать SASS или подобное, которое «компилируется» в CSS.

Answer 3

Здесь Каскадирование в каскадных таблицах стилей входит в игру.

Подумайте о своем элементе html или виджета/модуле (группе вложенных элементов html) в качестве объекта. Вы знаете, что у вас будут объекты, которые имеют одни и те же свойства, поэтому вы захотите создать класс повторного использования, который они могут использовать.

.baseModule {align: center;} 

Скажите, что ваш модуль является сообщением (ошибка, вспышка ...). Таким образом, вы «расширяете» или «включаете» свой класс .baseModule, потому что все сообщения будут выравниваться по центру (см. Последний пример html).

.message {border: 1px solid #555;} 

Кроме того, вы хотите, чтобы ваши сообщения об ошибках имели красный фон. Кроме того, вы можете переписать свойство border из .baseModule.message здесь, если хотите, чтобы он был другого цвета или чего-то другого.

.error {background-color: red;} 

Итак, теперь у вас есть несколько определений css, которые можно использовать повторно с легкостью.

<!-- Regular message module --> 
<p class="baseModule message"> 
    I am a regular message. 
</p> 

<!-- Error message module --> 
<p class="baseModule message error"> 
    I am an error message. My background color is red. 
</p> 

Чтобы связать это с вашим вопросом, вы в основном использовали бы несколько имен классов для максимального повторного использования. Предоставленный ie6 не поддерживает цепные селектор (class1.class2.class3), но это все еще аккуратный трюк!