Различение контекстно-зависимых классов в CSS

Question

Это больше RFC.У меня есть CSS-классы, у которых есть назначенные правила, например footer

.footer { border: 1px solid black; }

И затем у меня есть классы, у которых есть правила, назначенные только как потомки других классов, например right

.footer .right { position: absolute; right: 0}
.menu .right { float: right }

И я хочу иметь возможность различать их с первого взгляда, поэтому я знаю, что могу использовать .right в новом контексте, и я не будусталкиваются с уже существующими правилами CSS.

Я думал о том, чтобы называть контекстно-независимые классы заглавными ( Footer ), но это означало бы, что большинство классов будут написаны заглавными буквами.Или префикс контекстно-зависимых классов с дефисом, например -right .Что касается моего понимания стандарта, это законно.Браузеры справляются с этим нормально?

Как вы думаете, что будет лучше?Это вообще хорошая идея?

Обновление: Смысл в том, чтобы различать два вида классов.

• Вид 1 (например, foo) будетвозможно, к ним будут применены правила CSS .foo { ... }.

• К виду 2 (например, к bar) никогда не будут применены правила CSS, за исключением случаев, когда они являются потомками классов вида 1 .foo .bar { ... } /* OK */, иникогда .bar { ... } /* WRONG */

Тогда возникает вопрос: как бы вы порекомендовали различать классы вида 1 и вида 2.

Answer 1

Возможно, будет проще добавить некоторые комментарии и отступы в ваш код. Например

/* Main FOOTER style */
.footer { border: 1px solid black; }

    /* sub FOOTER styles */
    .footer .right { position: absolute; right: 0}
    .menu .right { float: right }

Конечно, это может не сработать, если у вас есть тонна стилей. Вы не хотели бы раздуть свой stylesheet. Но если читабельность - это главное ...

Кроме того, вы должны стараться не называть свои стили в соответствии с тем, что они делают (например, .right), на случай, если вы захотите изменить то, что они делают (например, оставить их) в будущем.

Answer 2

Конечно, это хорошая идея!

Я бы использовал class="footer right", а затем .footer.right, но некоторые старые браузеры с этим не работают.

Все браузеры отлично справляются с тире. На самом деле я использую .footer и footer-right, поэтому вы можете использовать их следующим образом:

HTML

<div class="footer footer-right">...</div>

CSS

.footer { border : 1px solid #000}
.footer-right { position : absolute; right : 0}
.footer a { ... }
.footer-right a { ... }
.menu { ... }
.menu-right { float : right}