如何解决区分CSS中的上下文相关类
| 这更像是RFC。我有自己指定规则的CSS类,例如页脚.footer { border: 1px solid black; }
然后我有一些只将规则分配为其他类后代的类,例如right
.footer .right { position: absolute; right: 0}
.menu .right { float: right }
而且我希望能够一眼就将它们区分开,因此我知道我可以在新的上下文中使用.right,并且不会与现有的CSS规则冲突。
我想到了将上下文无关的类命名为大写(Footer),但这意味着大多数类都将大写。或在上下文相关的类前面加上破折号,例如-right。就我对标准的理解而言,这是合法的。浏览器可以处理吗?
您认为最好的是什么?这通常是个好主意吗?
更新:
关键是要区分两种类型。
种类1(例如foo)可能会将CSS规则套用到「ѭ2」。
种类2(例如bar)永远不会应用CSS规则,除非是种类1类.foo .bar { ... } /* OK */
的后代,也决不是.bar { ... } /* WRONG */
然后的问题是:您如何建议区分种类1和种类2的类。
解决方法
在代码中添加一些注释和缩进可能会更容易。例如
/* Main FOOTER style */
.footer { border: 1px solid black; }
/* sub FOOTER styles */
.footer .right { position: absolute; right: 0}
.menu .right { float: right }
当然,如果您有很多样式,这可能对您不起作用。您不想to6。但是如果可读性是主要的事情...
此外,如果您以后想更改样式(例如,保留样式),则应尽量避免根据样式来命名样式(例如.right
)。
,当然,这是个好主意!
我会先使用class=\"footer right\"
,然后再使用ѭ9but,但是某些旧的浏览器将无法使用。
所有浏览器都能完美地处理破折号。我实际上使用.footer
和footer-right
,因此您可以像这样使用then:
的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}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。