CSS元素样式的分组顺序是否有标准或最佳实践?我知道这不是一个主要问题,但我想确保我总是生成可读的代码,特别是对于具有许多样式的元素。
例如:
#element {
font-family: Arial;
font-size: 8pt;
color: #666666;
border: 1px solid #ccc;
position: relative;
top: 5px;
left: 5px;
}
#element按照文本样式的顺序对样式进行分组,然后是边框,然后是位置。是否存在css类型层次结构的标准,将某种类型的优先级或重要性放在这个顺序上?例如,您是否应该按照位置、文本样式、边框的顺序进行分组?
坦率地说,这归结为个人偏好,但这是我的惯例:
将看起来彼此相关的事物分组。然后,用空白来分隔每个"组"。我只是在每个街区后按回车键。对于其他样式,如"top","left"等,我把它们都放在主样式(如"position")之后的一行中。我也倾向于把CSS3属性作为任何给定块的最后一个样式。
有时候,当我心情好时,我也倾向于松散地按字母顺序排列属性(按块排列)。但是,这只是个人偏好。
我所做的例子:
#element {
color:black;
font-family:Arial;
font-size:1.2em;
font-weight:bold;
text-transform:capitalize;
text-shadow:0 1px 1px black;
background-color:white;
border-bottom:1px dotted gray;
box-shadow:1px 1px 2px black;
position:fixed;
top:0; right:0;
height:30px;
width:245px;
}
只是我的两便士!
不同的人有不同的意见,我更喜欢按字母顺序排列。
然后CSS本身可以重构,以分离出结构化的CSS页面和ui元素特定的页面。
结构CSS是控制页面结构的CSS。
好问题,不确定是否有标准,但我更喜欢的方法是。
#element {
layout,
positioning,
text style
appearance
}
例如#element {
display: block;
width: 15px;
height: 15px;
float: left;
position: relative;
font-size: 12px;
line-height: 16px;
text-decoration: none;
color: #333;
text-indent: -9999px;
white-space: nowrap;
background: #fff;
border: 1px solid #ccc;
border-radius: 3px;
}
就像所有的编码风格一样,这不是那么重要。对起作用的是一致性。如果你在一个团队中工作,你应该在最适合你的东西上达成一致,而不是找到一个你需要适应的被认为是最好的惯例……那真是浪费时间。同样地,如果你正在做一个将被继承的项目,坚持同样的惯例,但是做最适合你的。