css: как наследовать весь класс

Question

У меня есть класс «t_data», который предназначен для настройки внешнего вида для большинства моих таблиц.

Хотя, в некоторых случаях мне нужно сделать дополнительные специализации таблиц: допустим, что таблицы для «клиентов» и «заказы» выглядят по-другому.

По умолчанию способ наследования стилей для описания CSS-определения для обоих классов в том же блоке, что-то вроде этого:

table.t_data, table.t_data_order, table.t_data_customer 
{ 
    background-color: #080; 
} 

Таким образом работает хорошо до некоторой степени ... пока я не слишком много различных определения.

Прямо сейчас у меня есть уже что-то вроде этого:

table.t_data thead tr th, table.t_data thead tr td, table.t_data tbody tr th,  table.t_data tbody tr td, table.t_data tfoot tr th, table.t_data tfoot tr td, 
table.t_group thead tr th, table.t_group thead tr td, table.t_group tbody tr th,  table.t_group tbody tr td, table.t_group tfoot tr th, table.t_group tfoot tr td 
{ 
    border: #333 1px solid; 
} 

Для того, чтобы сделать персонализировать t_data выглядеть по-разному для t_data_customer и/или t_data_order мне нужно будет тройные этот блок ... и существует высокий риск пропустить некоторые элементы ... у меня также есть более 10 таких блоков для различных элементов (например, фон, шрифт и т.д.)

есть ли CSS или даже без CSS решения для подобных вещей?

спасибо!

P.S. Если у вас нет решения, но только идеи, не стесняйтесь делиться ими! Любые мысли приветствуются

Answer 1

К сожалению, вы не можете сделать это с помощью CSS. К счастью, вы можете использовать прекомпиляторы CSS для этого для вас (примеры: LESS & Sass). Чтобы быть более точным, вы можете использовать Mixins (поддерживается на обоих языках).

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

.rounded-corners (@radius: 5px) { 
    -webkit-border-radius: @radius; 
    -moz-border-radius: @radius; 
    -ms-border-radius: @radius; 
    -o-border-radius: @radius; 
    border-radius: @radius; 
} 

#header { 
    .rounded-corners; 
} 
#footer { 
    .rounded-corners(10px); 
} 

(пример из LESS). Это то, что вы могли бы сделать со своим классом t_data.

Answer 2

Что о добавлении нового класса общего CSS для таблиц и целевого

.common td 
.common th { 
} 

Перед тем, как добавить класс к столу, вы должны убедиться, что стиль по умолчанию вашего стола не хватает например

td { 
    /* Sensible default for all table cells */ 
} 

Следующий шаг - найти имя класса, которое является «общим» для ваших таблиц с альтернативным стилем. Популярная платформа twitter bootstrap использует «table-bordered» для таблицы с границами, другие утверждали бы, что было бы лучше найти семантический общий знаменатель. Но это зависит от вас.

Это не про семантический или нет, но с тех пор пилы презентация Николь Салливан, я не могу найти презентацию, но я могу найти цитаты из него: http://css-tricks.com/semantic-class-names/

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

Я пытаюсь найти смысл для того, что мы пишем в css-файлах и нацеливаться на большие общие знаменатели.

Answer 3

Вместо определения многих классов вы можете использовать идентификатор и класс.

С идентификатором вы определяете основной CSS и с классами, которые вы определяете.

<table id="mainstyle" class="variation1"> ...