css代码如何优化？这几个办法要知道
发布时间：2022-04-20 09:09:52 所属栏目：语言 来源：互联网
导读：对CSS代码优化是很有作用的，能够减少占用网页字符，提高网站打开速度，便于维护，而且也能让自己写的代码更加专业。那么我们要如何来编写高效呢个CSS呢？下面分享一些css代码优化方法和规则。 一、避免过度约束 一条普遍规则，不要添加不必要的约束。 代码
|
对CSS代码优化是很有作用的，能够减少占用网页字符，提高网站打开速度，便于维护，而且也能让自己写的代码更加专业。那么我们要如何来编写高效呢个CSS呢？下面分享一些css代码优化方法和规则。 一、避免过度约束 一条普遍规则，不要添加不必要的约束。 代码如下: // 糟糕 ul#someid {..} .menu#otherid{..} // 好的 #someid {..} #otherid {..} 二、后代选择符最烂 不仅性能低下而且代码很脆弱，html代码和css代码严重耦合，html代码结构发生变化时，CSS也得修改，这是多么糟糕，特别是在大公司里，写html和css的往往不是同一个人。 代码如下: // 烂透了 html div tr td {..} 三、避免链式（交集）选择符 这和过度约束的情况类似，更明智的做法是简单的创建一个新的CSS类选择符。 代码如下: // 糟糕 .menu.left.icon {..} // 好的 .menu-left-icon {..} 四、坚持KISS原则 想象我们有如下的DOM： 代码如下: <ul id="navigator"> <li><a href="#" class="twitter">Twitter</a></li> <li><a href="#" class="facebook">Facebook</a></li> <li><a href="#" class="dribble">Dribbble</a></li> </ul> 下面是对应的规则…… 代码如下: // 糟糕 #navigator li a {..} // 好的 #navigator {..} 五、 避免不必要的命名空间 代码如下: // 糟糕 .someclass table tr.otherclass td.somerule {..} //好的 .someclass .otherclass td.somerule {..} （编辑：常州站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
