Как повторно использовать стили?

В прошлом я много узнал о CSS, но теперь я не помню, как использовать стили.

Пример:

У меня есть несколько вкладок с классом tab, и я могу переключить их с помощью javascript. Текущая выбранная вкладка имеет другой класс, active.

Их стиль CSS:

.tab {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    padding: 15px 0 15px 0;
    border: solid thin #CCC;
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
    color: #272F42;
    cursor: pointer;
    background-color: white;
}

.active {
    position: relative;
    top: 0;
    left: 0;
    padding: 15px 0 15px 0;
    border: solid thin #CCC;
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
    color: #272F42;
    cursor: default;
    background-color: #FFCF75;
}

Оба стиля имеют много идентичных стилей, кроме 2, cursor и background-color.

Итак, мой вопрос: как я могу использовать стиль .tab и использовать его в .active?

Я хочу добиться чего-то вроде этого:

.active { //extends .tab
    cursor: default;
    background-color: #FFCF75;
}

Спасибо.

Ответы

Ответ 1

Вы могли бы и, вероятно, должны были применить оба класса к элементу, например:

<a class="tab active"></a>

Если вы хотите использовать правило css для конкретной комбинации этих двух классов, вы бы сделали это так:

.tab {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    padding: 15px 0 15px 0;
    border: solid thin #CCC;
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
    color: #272F42;
    cursor: pointer;
    background-color: white;
}

.active 
{
    cursor: default;
    background-color: #FFCF75;
}

.tab.active /* no space */
{
    /* styles for elements that are both .tab and .active */
    /* leaving .active reusable for things other than tabs */
    /* and allowing override of both .tab and .active */
}

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

Ответ 2

Используйте оба имени класса в атрибуте class. В правиле .active задайте только разные стили, как у вас уже во втором примере.

<div class="tab active"></div>

Ответ 3

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

.tab, .active {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    padding: 15px 0 15px 0;
    border: solid thin #CCC;
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
    color: #272F42;
}

.tab{
    cursor: pointer;
    background-color: white;
}

.active {
    cursor: default;
    background-color: #FFCF75;
}

ИЗМЕНИТЬ

Основываясь на вашем комментарии

В настоящее время я переключаю вкладки, добавляя к классу класс .active атрибут.

вот что я сделал бы:

HTML

<div class="tab"></div>

CSS

.tab {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    padding: 15px 0 15px 0;
    border: solid thin #CCC;
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
    color: #272F42;
    cursor: pointer;
    background-color: white;
}

.active {
    cursor: default;
    background-color: #FFCF75;
}

Затем просто добавьте или удалите класс .active, оставив .tab как есть.

Пока .active ниже в таблице стилей, он перезапишет необходимые биты.

Ответ 4

Измените правило .tab на .tab, .active.

Ответ 5

.active, .tab {
   ... full style of both here
}

.active {
   ... the styles that differ from .tab
}

Ответ 6

Это селекторное наследование является приятной функцией SASS.

Если вы хотите придерживаться простого CSS, посмотрите раздел "Наследование селектора", и вы увидите, как код SASS с помощью @extend превращается в обычный CSS.

Ответ 7

Вы можете применить несколько классов к элементу. Таким образом, вы можете иметь элемент с классом = "tab active" и иметь в нем оба спецификаций.

Ответ 8

Вы можете извлечь базовый класс с идентичными стилями и пометить свои элементы двумя классами: .tab .base
Вы можете использовать динамический язык css как sass или less, который поддерживает классы.

Ответ 9

Вы можете комбинировать .active в .tab и переопределять части, которые необходимо изменить следующим образом:

.tab, .active {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    padding: 15px 0 15px 0;
    border: solid thin #CCC;
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
    color: #272F42;
    cursor: pointer;
    background-color: white;
}

.active {
    cursor: default;
    background-color: #FFCF75;
}