LINUX.ORG.RU
Форум — Development  

«Наследование» в css?

 ,


0

1

Как правильно организовать наследование в css? 

.my_class_a { <набор свойств "А"> }
.my_class_b { Тут необходимо тоже, что у "А", но с некоторыми дополнениями/override-ми }
Можно копипастить в класс Б все свойства вручную, но это противоречит DRY и логике вещей. Можно в коде делать что-то типа: 
<div class="my_class_a"><div class="my_class_b"> DATA </div></div>
для комбинации свойств обоих классов, но это порождает избыточные div-ы (или span-ы?)

Выделить общие свойства в отдельный класс, или использовать mixin'ы (sass, scss или что-нибудь подобное вам в руки).

tensai_cirno ★★★★★
()
Ответ на: комментарий от tensai_cirno

Погуглил по sass, кажется, нужно нечто подобное, видимо стандартный css этого не позволяет

omegatype ★★★
() автор топика

Я для этого использую SASS. Кроме этого, там ещё много удобных плюшек есть.

Alve ★★★★★
()

Можно просто 

<div class="my_class_a my_class_b"> DATA </div>

anonymous
()

было 

.my_class_a { <набор свойств "А"> }
.my_class_b { Тут необходимо тоже, что у "А", но с некоторыми дополнениями/override-ми }

стало 

.my_class_a, .my_class_b  { <набор свойств "А"> }
.my_class_b { overrid-ы }

shrub ★★★★★
()
Ответ на: комментарий от shrub

Благодарю за совет, хотя по мере усложнения css следить за такими конструкциями будет все тяжелее...

omegatype ★★★
() автор топика
Ответ на: комментарий от stevejobs

Любопытная статья, благодарю за полезную ссылку!

omegatype ★★★
() автор топика

1. 

<a>1</a>
<header><a>2</a></header>

a { color: #000; }
header a { font-weight: bold; }

2. 

<a class="link">1</a>
<a class="link bold">2</a>

a.link { color: #000; }
a.link.bold { font-weight: bold; }

gatsu ★
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.
Development