Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

『CSS属性应该「SHOULD」尽可能使用简化方式书写』存疑 #7

Open
foolyoghurt opened this issue Apr 26, 2014 · 3 comments
Labels
Milestone

Comments

@foolyoghurt
Copy link
Contributor

如果需要用到属性中所有值的时候,简写肯定是最好的,但是大多情况下不需要用到属性中的所有值,简写又会给没有设置的值设置一个初始值(initial value),容易不经意的造成属性覆盖。如果把不必要的值也在简写中写上,又造成不必要的重写。所以,建议谨慎对待简写

如下面这段代码中,如果图片失效,颜色将不是期望的红色

background-color: red;
background: url(images/bg.gif) no-repeat top right;

参看:MDN: shorthand properties

Code Guide by@mdo: Shorthand notation

@miller miller added the CSS label Apr 26, 2014
@miller
Copy link
Contributor

miller commented Apr 26, 2014

这个难道不应该简写成

background:red url(images/bg.gif) no-repeat top right;

另外,这条规则的主要思想是在保持正确性的前提下尽可能的节省代码量,不能因为存在潜在的问题而否定大部分有效的情况。

这条建议也可以加到注意事项中提醒大家注意副作用。

@foolyoghurt
Copy link
Contributor Author

是的,我的例子确实不恰当,我主要是想说明一下这个特性,可能更恰当的例子是下面这样

//css代码
body { background-color: #f8f8f8; }
.some { background-color: red; }
.some:hover { url(images/bg.gif) no-repeat top right; }

本意是想在.some元素上hover时改变背景图片,但是背景图片如果加载失败了,那么背景色并不是变为原本的red,而是#f8f8f8,可能这并不是我们想要的结果。如果总是将简写中属性写全那么就不会有这个问题,但貌似很多人在简写时都只是写部分属性

@miller
Copy link
Contributor

miller commented Apr 27, 2014

是的,这样的情况确实存在,我在这条规则后增加了注意事项以及你提供的参考链接。
另外,Code Guide by@mdo: Shorthand notation的规范展现风格很赞啊,后续可以参考下。

@miller miller added this to the 1st edition milestone Apr 27, 2014
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants