WordPress CSS Coding Standards:WordPress 的 CSS 代码标准

wordpress

像其他代码标准一样,从核心代码到主题再到插件,WordPress 的 CSS 代码标准是为了提供给Wordpress开源社区和项目建立基准,让他们更好地进行合作和评估。其中的代码和文件,就像某一个团队出品的一样。还有一个重要的点,WordPress 的 CSS代码应该是可读、有意义、一致以及别致的。

在核心样式表中,总是能看到部分代码层次不齐,对于这个情况,我们一直有在重视和努力修补CSS代码标准的问题。更多信息以及UI/前端开发内容,我们将会以另一个单独的指南形式呈现。

结构

有很多种不同的方式可以用来给样式表打结构用。书写CSS关键的一点是,保持高度的明确性,这样可以让接下来的参与者对文档有个清晰的认识。

  • 属性间用tab缩进,而非空格
  • 段落间用双空行隔开,段落内区块间用单空行隔开
  • 每个选择器应该单独一行,以逗号或者开大括号结尾。每组“属性-值”应该独立一行,以一个tab键程缩进开头,以分号结尾。关闭大括号靠左,跟打开的选择器同级缩进。

正确:

错误:

选择器

越具体,需要注意的细节就越多。直白的选择器能让我们更有效率,但如果没经过测试的话,你可能会适得其反。选择器明确定位确实能节省时间,但也会让样式表变得杂乱不堪。不妨多尝试,找一找对你来说最合适的方式来创建选择器,在整体样式和DOM布局中取得好的平衡。

  • 文件命名跟WordPress代码标准所提类似,使用单独小写的单词以及连字符来给选择器取名,不要使用驼峰法或下划线
  • 使用人类可读的选择器来描述元素样式
  • 属性选择器应用双引号包裹键值
  • 不要使用过度命名的选择器,如div.container可以被简化成.container

正确:

错误:

属性

跟选择器类似,属性太过具体也会妨碍设计的流畅性。少就是多嘛。请确认你没有重复使用样式或引入了固定尺寸(流布局接受度更高)来描述属性。

  • 属性应用冒号和空格结尾
  • 除了字体名和浏览器前缀,所有的属性和值都应使用小写
  • 使用16进制或rgba()(如果需要透明度的话)来描述颜色。不要使用RGB格式和大写字母,并尽可能书写省略值,如:用#fff代替#FFFFFF
  • 尽可能用简略的方式来描述背景、边框、字体、列表样式及内外边距值(具体写法请参考CSS简略记法

属性顺序

“属性一致的内容,尤其当你有很多的时候,请把它们成组。”
— Nacin

还有一点很重要,要选择有意义、有语意的方式来书写代码。随意的排序让代码变得混乱不堪,毫无诗意。Wordpress的内核中,CSS是按照逻辑或成组顺序排序的,而属性则是按照含义和具体顺序分类的。分类过的属性同样也能做为段落之间的过渡,如背景后面是颜色。基础的顺序如下:

  • 显示
  • 定位
  • 盒模型
  • 颜色和排版
  • 其他

内核中还有些原则没能用上(如CSS3的动画效果),可能无法列入规定顺序里,但仍旧希望它位于符合逻辑的位置当中。正如CSS一直在逐步发展,我们的标准自然也会跟着不断地优化。

不管在哪个相关的属性中,Top/Right/Bottom/Left(TRBL/trouble值) 都应该按照此顺序排列(如margin)。边角指定符的值(如border-radius-*-*)应按照top-lefttop-rightbottom-rightbottom-left的顺序指定,简略写法中就是这样规定的。

案例:

还有一种方法常被Automattic、WordPress.com主题团队使用——即属性按照字母排序,无视例外情况。

案例:

浏览器前缀

更新于2014年2月13日,版本[27174]

我们使用了grunt自动前缀器作为预提交工具,管理必须出现的浏览器前缀自然得心应手,这样才能让该节大部分代码无可争议。如果不使用Grunt输出,浏览器前缀从最长的(-webkit-)到最短的(无前缀)的情况都可能出现。其他情况请参考标准剩余部分。

CSS中有很多方式表示属性值,按照以下标准来编写,能帮我们保持代码的连贯性。

  • 冒号和值之间添加空格
  • 不要用空格来填充圆括号
  • 永远以分号结尾
  • 用双引号取代用单引号,并只在需要的时候用它,例如字体名字中间有空格时
  • 零值除了特殊情况,一般都不要有单位,例如transition-duration
  • 行高也应该不使用单位,除非设定为某个特定的像素值。这可不仅仅只是个样式规矩,更多信息请查看:http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/
  • 小数点前要加上0,包括描述rgba()的情况
  • 一个属性中多个值不仅要用逗号分开,还要加上1个空格或空行,包括描述rgba()的情况。新起一行的情况应用于过长的、多部分的值,适用于那些需要简写的属性,如box-shadowtext-shadow。第一个值后每个新的值都应该另起一行,跟选择器同级别缩进,并使用空格与前一个值左对齐

正确:

错误:

媒介查询

媒介查询能让我们更好地修正盒模型,以符合不同尺寸屏幕的需要。如果需要使用它,请确保你已在目标断点前后测试过代码。

  • 建议在样式表底部按照不同媒介分类,保留媒介查询语句
  • WordPress内核中的wp-admin.css文件是个例外,它很庞大,每个段落基本上都代表着一个样式表。因此,这里的媒介查询只能放在段落的末尾才能被应用
  • 媒介查询的规则集应使用一级缩进

案例:

注释

  • 如果你对于文件大小、缩略版文件亦或是SCRIPT_DEBUG常量有顾虑,请灵活地使用注释功能。超过80字符的长注释应当手动换行。
  • 表格格式应当被用在长的样式表中,特别是那些已经被高度段落化的内容。使用索引数字(1.0、1.1、2.0等)能帮助你快速搜索和定位你要的内容。
  • 注释也应该像PHP文档一样遵守格式要求,虽然不用完全符合CSS文档标准,但久而久之,某些方面的规定还是会尽可能采纳。段落/子段落头部前后应当都有空行;行内注释不应空行,不然就跟所要注释的内容分开了。

段落描述:

行内描述:

最佳实践

书写样式表总是得花费很长的篇幅,内容不断地重复和覆写,焦点也就逐渐模糊掉了。从一开始就书写优秀的代码,能帮助我们保持代码的灵活度,以便在一次次修改中更好地概览和审读。

  • 如果你要修补bug,在增加更多代码前不妨试着去除掉些。
  • 魔法数反而是不幸的数,这些数字一般用于快速解决一次性的bug,例如.box { margin-top: 37px }
  • DOM会不断变化,所以你应该直接引用你的目标元素,而非利用依靠父子层级关系来“找”它,例如:使用.highlight而非.highlight a(选择器位于父级)
  • 明白何时使用高度属性。只有在你包含外部元素(如images)的情况才能用,其他情况用line-height会更加灵活。
  • 不要重复声明默认属性和值(例如:区块元素声明display: block;)。

官方网站:CSS Coding Standards

官方网站:https://make.wordpress.org/core/handbook/coding-standards/css/

打赏支持我整理更多优质资源,谢谢!

打赏编辑

打赏支持我整理更多优质资源,谢谢!

任选一种支付方式

1 2 收藏

资源整理者简介:凝枫

非典型性程序员,爱做一些和写程序毫不相干的事 个人主页 · 贡献了46个资源 · 1


直接登录

推荐关注

按分类快速查找

关于资源导航
  • 伯乐在线资源导航收录优秀的工具资源。内容覆盖开发、设计、产品和管理等IT互联网行业相关的领域。目前已经收录 1439 项工具资源。
    推送伯乐头条热点内容微信号:jobbole 分享干货的技术类微信号:iProgrammer