CSS - как высушить?

Есть ли способ сушить этот CSS? Только разница - цвет?CSS - как высушить?

div.base-text-gold { 
    position: absolute; bottom: 9px; color: #FED577; font-size: 10px; 
    font-weight: bolder; text-align: center; width: 61px; text-transform: uppercase; 
} 

div.base-text-grey { 
    position: absolute; bottom: 9px; color: #D1D2D4; font-size: 10px; 
    font-weight: bolder; text-align: center; width: 61px; text-transform: uppercase; 
}

источник

2010-05-24 keruilin

Короче говоря, нет. CSS действительно хорош, будучи Anti-DRY вместе с HTML и XML. – Earlz

Вместо того, чтобы называть классы тем, на что они похожи, хорошая идея - назвать их тем, чем они являются. См. Это: http://sixrevisions.com/css/css-tips/css-tip-2-structural-naming-convention-in-css/ –

Отдельные из цветов в различные классы CSS, как так:

div.base-text { 
    position: absolute; bottom: 9px; font-size: 10px; 
    font-weight: bolder; text-align: center; width: 61px; text-transform: uppercase; 
} 

div.gold { 
    color: #FED577; 
} 

div.grey { 
    color: #D1D2D4; 
}

, а затем просто применить два класса к элементам вместо:

<div class="base-text gold">...</div>

источник

2010-05-24 00:57:05 Turnor

Кажется, это самое очевидное решение для меня! –

+1, однако просто указать на OP (надеюсь) очевидную точку, что имена классов должны предпочтительно иметь некоторое контекстуальное значение (.error, .highlight, ...), а не имя цвета. Таким образом, кто-то придет после вас, возможно, будет знать, где/почему эти классы используются. –

+1 Так как я собирался сказать что-то вроде «проверить Сасса», полностью ударил мой шанс, чтобы это было просто, что, как вы продемонстрировали, - это путь. –

Вы можете попробовать один из lessCSS или dotlesscss Librarys доступных

источник

2010-05-24 00:56:02

Я вхожу в эту идею. хороший. – typeoneerror

Вы можете создать «базовый класс» base-text, а затем просто сохранить цвета в «подклассы»:

div.base-text { 
    position: absolute; bottom: 9px; font-size: 10px; 
    font-weight: bolder; text-align: center; width: 61px; text-transform: uppercase; 
} 

div.base-text-gold { 
    color: #FED577; 
} 

div.base-text-grey { 
    color: #D1D2D4; 
}

Конечно, недостатком является то, что вам придется добавить 2 класса к вашему div, а не к одному:

<div class="base-text base-text-gold">...</div>

источник

2010-05-24 00:56:29

Вы могли наследовать от класса «база- текст ", который не определяет цвет.

Тогда у вас есть два варианта: имеют стиль = "" рядом с ним ...

<style> 
div.base-text { 
    position: absolute; bottom: 9px; font-size: 10px; 
    font-weight: bolder; text-align: center; width: 61px; text-transform: uppercase; 
} 
</style> 

<html><head>[the style thingie above]</head><body> 
    <div class="base-text" style="color:BLARGH"> RAWR~ </div> 
</body></html>

ИЛИ

наследоваться от классов золота и серый тоже

<style> 
div.base-text { 
    position: absolute; bottom: 9px; font-size: 10px; 
    font-weight: bolder; text-align: center; width: 61px; text-transform: uppercase; 
} 
div.grey { 
    color: #999999; 
} 
div.gold { 
    color: #DDDD99; 
} 
</style> 
<html><head>[the style thingie above]</head><body> 
    <div class="base-text gold" style="color:BLARGH"> RAWR~ </div> 
    <div class="base-text grey" style="color:BLARGH"> DADADEEEEE~ </div> 
</body></html>

источник

2010-05-24 00:57:12 Warty

Ну ... вы можете сделать следующее:

div.base-text { 
    position: absolute; bottom: 9px; font-size: 10px; 
    font-weight: bolder; text-align: center; width: 61px; text-transform: uppercase; 
} 

div.base-text-gold { 
    color: #FED577; 
} 

div.base-text-grey { 
    color: #D1D2D4; 
}

И в каждом из ваших дивы, просто пойти:

<div class="base-text base-text-gold">This is the gold div.</div> 
<div class="base-text base-text-grey">This is the grey div.</div>

источник

2010-05-24 00:59:17

Моя первая реакция должна вам сказать, что это, вероятно, не очень хорошая идея, чтобы определить цвета в именах классов CSS. В этот момент это действительно не лучше, чем встроенный CSS. Вам лучше пойти с .emphasized или .strong для текста золота, в зависимости от вашей ситуации. И даже тогда вы можете просто нарисовать и использовать тег <em> или <strong>. Тем не менее, как насчет ответа на ваш вопрос?

Ответ заключается в попытке никогда не использовать одно и то же заявление дважды.

div.base-text-gold, div.base-text-grey { 
    position: absolute; bottom: 9px; font-size: 10px; 
    font-weight: bolder; text-align: center; width: 61px; text-transform: uppercase; 
} 

div.base-text-gold { color: #FED577; } 
div.base-text-grey { color: #D1D2D4; }

источник

2010-05-24 01:02:47 dustyburwell

Очень красивый! Я не знал, что вы можете определить класс несколько раз! – Peterdk

CSS - как высушить?

ответ

Смежные вопросы