Как я могу эффективно «подкласс» во внешнем CSS? - PullRequest
Новая
       4

Как я могу эффективно «подкласс» во внешнем CSS?

1 голос
/ 14 января 2012

У меня есть определенная коробка, которая работает для большей части моего сайта: 

.searchBox
{
    width: 610px;
    height: 170px;
    padding: 15px 55px 5px 15px;
    background: url('../images/advanced_search_BG.jpg') no-repeat;
    margin-top: 10px;
}

Но у меня есть одна коробка, которая должна быть немного больше;это должно быть height: 220px.

Я знаю, что могу продублировать вышесказанное, позвонив, скажем searchBoxLarge, поместив это в мой тег div, и все будет готово.Но это дублирующий код, который мне не нужен.

Это может быть «тупой вопрос», но я не обучаюсь CSS и не ищу помощи ...

Что такоеформат для указания searchBoxLarge с height: 220px, но без дублирования всей записи searchBox?

Ответы [ 2 ]

7 голосов
/ 14 января 2012

Добавьте searchBoxLarge к объявлению searchBox, а затем создайте отдельное объявление только для searchBoxLarge, которое перезаписывает значение высоты. 

.searchBox, .searchBoxLarge
{
    width: 610px;
    height: 170px;
    padding: 15px 55px 5px 15px;
    background: url('../images/advanced_search_BG.jpg') no-repeat;
    margin-top: 10px;
}

.searchBoxLarge
{
    height: 220px;
}
0 голосов
/ 14 января 2012

Была хорошая статья об этом на SitePoint http://www.sitepoint.com/first-look-object-oriented-css/

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

Я согласен с тем, что название «объектно-ориентированный CSS» вводит в заблуждение, потому что нет настоящей подтипы

Ура! Орин

...