logo头像

叩首问路,码梦为生

CSS书写规范

本篇文章转载自 cnblogs,我在看了原文章之后又搜了一些其他相关资料,就有了下面这些对于 CSS 书写规范的总结。CSS 作为前端语言中最好学的一种,很容易造成“不需要规范”的错觉,但其实 CSS 的书写也有很多规范,顺序、命名以及缩写等等,知道并且遵循这些规范不仅可以更容易让别人读懂你的代码,还能方便自己。

CSS 书写顺序

  1. 位置属性(position, top, right, z-index, display, float 等)
  2. 大小(width, height, padding, margin)
  3. 文字系列(font, line-height, letter-spacing, color- text-align 等)
  4. 背景(background, border 等)
  5. 其他(animation, transition 等)

CSS 书写规范

使用 CSS 缩写属性

CSS 有些属性是可以缩写的,比如 padding, margin, font 等等,这样精简代码同时又能提高用户的阅读体验。

去掉小数点前的 “0”

简写命名

很多用户都喜欢简写类名,但前提是要让人看懂你的命名才能简写哦!

16 进制颜色代码缩写

有些颜色代码是可以缩写的,我们就尽量缩写吧,提高用户体验为主。

连字符 CSS 选择器命名规范

  1. 长名称或词组可以使用中横线来为选择器命名。
  2. 不建议使用 “_” 下划线来命名 CSS 选择器,为什么呢?
  • 输入的时候少按一个 shift 键;
  • 浏览器兼容问题 (比如使用 _tips 的选择器命名,在 IE6 是无效的)
  • 能良好区分 JavaScript 变量命名(JS 变量命名是用 “_”)

这里有一篇破折号与下划线的详细讨论,英文:点击查看 中文篇:点击查看 《CSS Secrets》的译者张鹏对于使用 “_” 还是 “-“ 也阐述了自己的观点,比较了两者的优缺点,可以点击这里查看

不要随意使用 Id

id 在 JS 是唯一的,不能多次使用,而使用 class 类选择器却可以重复使用,另外 id 的优先级优先与 class,所以 id 应该按需使用,而不能滥用。

为浏览器添加状态前缀

有时候可以给选择器添加一个表示状态的前缀,让语义更明了,比如下图是添加了 “.is-” 前缀。

CSS 命名规则

可以按照功能、位置、结构进行命名,因为命名的出发点就是为了让自己和其他人都能看懂,所以越明白越好:

  • 一律小写;
  • 尽量用英文;
  • 不加中槓和下划线;
  • 尽量不缩写,除非一看就明白的单词。

在译文《CSS命名神马的真心难》中,作者指出可以根据三类情况给定一个 class 名:

  • 功能性(positive-button、important-text、selected-tab)
  • 内容性(submit-button、intro-text、profile-photo)
  • 展示性(green-button、bit-text、sqiggle-border)

其实,在我看来,命名的首要目的就是“语义化”,而“语义化”有两个方面:方便自己和方便别人,所以不一定所有的语义化都需要按照内容进行命名,class 名的语义化不同于 HTML,可以按照其背后的意义和开发者的意图进行命名

最常用主要命名:wrap(外套、最外层)、header(页眉、头部)、nav(导航条)、menu(菜单)、title(栏目标题、一般配合h1\h2\h3\h4标签使用)、content (内容区)、footer(页脚、底部)、logo(标志、可以配合h1标签使用)、banner(广告条,一般在顶部)、copyRight(版权)

CSS 样式表文件命名

  • 主要的 master.css
  • 模块 module.css
  • 基本共用 base.css
  • 布局、版面 layout.css
  • 主题 themes.css
  • 专栏 columns.css
  • 文字 font.css
  • 表单 forms.css
  • 补丁 mend.css
  • 打印 print.css

参考文章

支付宝打赏 微信打赏

听说赞过就能年薪百万