Linux.中国 - 开源社区

 找回密码
 骑士注册

QQ登录

微博登录


CSS编写指导规范和建议

2014-8-29 15:06    收藏: 1 分享: 1    

使用 CSS 选择器的目的

比起努力运用选择器定位到某元素,更好的办法是给你想要添加样式的元素直接添加一个 class。我们以 .header ul {} 这样一个选择器为例。

假定这个 ul 就是这个网站的全站导航,它位于 header 中,而且目前为止是 header 中唯一的 ul 元素。.header ul{} 的确可以生效,但是这样并不是好方法,它很容易过时,而且非常晦涩。如果我们在 header 中再添加一个 ul 的话,它就会套用我们给这个导航部分写的样式,哪怕我们设想的不是这个效果。这意味着我们要么要重构许多代码,要么给后面的 ul 新写许多样式来抵消之前的影响。

你的选择器必须符合你要给这个元素添加样式的原因。思考一下,「我定位到这个元素,是因为它是 .header 下的 ul,还是因为它是我的网站导航?」这将决定你应当如何使用选择器。

确保你的核心选择器不是类型选择器,也不是高级对象或抽象选择器。例如你在我们的 CSS 中肯定找不到诸如 .sidebar ul {} 或者 .footer .media {} 这样的选择器。

表达清晰:直接找到你要添加样式的元素,而非其亲元素。不要想当然地认为 HTML 不会改变。用 CSS 直接命中你需要的元素,而非投机取巧。

完整内容请参考我的文章 Shoot to kill; CSS selector intent

!important

只在起辅助作用的 class 上用 !important。用 !important 提升优先级也可以,例如如果你要让某条规则一直生效的话,可以用 .error { color:red!important; }。

避免主动使用 !important。例如 CSS 写得很复杂时不要用它来取巧,要好好整理并重构之前的部分,保持选择器简短并且避免用 ID 将效果拔群。

魔数与绝对定位

魔数(Magic Number)是指那些「凑巧有效果」的数字,使用魔数非常不好,因为它们只是治标不治本而且缺乏拓展性。

例如使用 .dropdown-nav li:hover ul { top: 37px; } 把下拉菜单移动下来远非良策,因为这里的 37px 就是个魔数。37px 会生效的原因是因为这时.dropbox-nav 碰巧高 37px 而已。

这时你应该用 .dropdown-nav li:hover ul { top: 100%; },也即无论.dropbox-down 多高,这个下拉菜单都会往下移动 100%。

每当你要在代码中放入数字的时候,请三思而行。如果你能用一个关键字(例如 top: 100% 意即「从上面拉到最下面」)替换之,或者有更好的解决方法的话,就尽量避免直接出现数字。

你在 CSS 中留下的每一个数字,都是你许下而不愿遵守的承诺。

条件判断

专门为 IE 写的样式基本上都是可以避免的,唯一需要为 IE 专门处理的是为了处理 IE 不支持的内容(例如 PNG)。

简而言之,如果你重构 CSS 的话,所有的布局和盒模型都不用额外兼容 IE。也就是说你基本上不用 <!--[if IE 7]> element{ margin-left:-9px; } < ![endif]--> 或者类似的兼容 IE 的写法。

Debugging

如果你要解决 CSS 问题的话,先把旧代码拿掉再写新的。如果旧的 CSS 中有问题的话,写新代码是解决不了的。

把 CSS 代码和 HTML 部分删掉,直到没有 BUG 为止,然后你就知道问题出在哪里了。

有时候写上一个 overflow: hidden 或者其它能把问题藏起来的代码的确效果立竿见影,但是 overflow 方面可能根本就没问题。所以要治本,而不是单纯治标。

CSS 预处理器

我用 Sass。使用时应当灵活运用。用 Sass 可以令你的 CSS 更强大,但是不要嵌套得太复杂。在 Vanilla CSS 中,只在必要的地方用嵌套即可,例如:

.header{}
.header .site-nav{}
.header .site-nav li{}
.header .site-nav li a{}

这样的写法在普通 CSS 里完全用不到。以下为不好的 Sass 写法:

.header{
    .site-nav{
        li{
            a{}
        }
    }
}

如果你用 Sass 的话,尽量这么写:

.header{}
.site-nav{
    li{}
    a{}
}
1234
查看其它分页:

发表评论


最新评论

我也要发表评论

返回顶部

分享到微信朋友圈

打开微信,点击底部的“发现”,
使用“扫一扫”将网页分享至朋友圈。