HTML & CSS » 推荐大家使用的CSS书写规范、顺序

推荐大家使用的CSS书写规范、顺序

发表于: HTML & CSS. 评论 (39)
Sponsor

写了这么久的CSS，但大部分前端er都没有按照良好的CSS书写规范来写CSS代码，这样会影响代码的阅读体验，这里设计达人网总结一个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-written-order

CSS书写规范

使用CSS缩写属性

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

abbreviation

去掉小数点前的“0”

del-zero

简写命名

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

name

16进制颜色代码缩写

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

color-abb

连字符CSS选择器命名规范

1.长名称或词组可以使用中横线来为选择器命名。

2.不建议使用“_”下划线来命名CSS选择器，为什么呢？

  • 输入的时候少按一个shift键；
  • 浏览器兼容问题 （比如使用_tips的选择器命名，在IE6是无效的）
  • 能良好区分JavaScript变量命名（JS变量命名是用“_”）

这里有一篇破折号与下划线的详细讨论，英文：点击查看 中文篇：点击查看

underline

不要随意使用id

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

css-id

为选择器添加状态前缀

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

status-select

 

 

CSS命名规范（规则）

常用的CSS命名规则

头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体佈局宽度：wrapper
左右中：left right center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
内容：content
标签：tags
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guide
服务：service
注册：regsiter
状态：status
投票：vote
合作伙伴：partner

注释的写法:

/* Header */
内容区
/* End Header */

id的命名:

1)页面结构

容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体佈局宽度：wrapper
左右中：left right center

(2)导航

导航：nav
主导航：mainnav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题: title
摘要: summary

(3)功能

标志：logo
广告：banner
登陆：login
登录条：loginbar
注册：register
搜索：search
功能区：shop
标题：title
加入：joinus
状态：status
按钮：btn
滚动：scroll
标籤页：tab
文章列表：list
提示信息：msg
当前的: current
小技巧：tips
图标: icon
注释：note
指南：guild
服务：service
热点：hot
新闻：news
下载：download
投票：vote
合作伙伴：partner
友情链接：link
版权：copyright

注意事项::

1.一律小写;
2.尽量用英文;
3.不加中槓和下划线;
4.尽量不缩写，除非一看就明白的单词。

 

CSS样式表文件命名

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

推荐：查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流：为设计新人提供的设计交流群，请加入UI设计交流群，分享经验、接单、求职、聊设计。
赞助商链接

相关的文章

赞助商链接
设计达人微信交流社区：shejidaren888
喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。
«
»

+ 添加评论39 Responses to “推荐大家使用的CSS书写规范、顺序”

  1. Frankie - 回复
    2021 年 09 月 25 日 上午 6:03

    就 CSS 命名规范，个人喜欢加 -，例如：btn-primary

  2. 依旧独特1012 - 回复
    2017 年 01 月 18 日 下午 11:07

    17年第一踩，收藏这么久，终于拿出来看看了！写的超赞~

  3. 孟洛 - 回复
    2016 年 07 月 29 日 上午 8:20

    赞一个，长见识了！

  4. 风歌 - 回复
    2016 年 05 月 13 日 下午 4:28

    逼死强迫症的节奏

  5. 如花是我哥 - 回复
    2016 年 02 月 28 日 下午 7:07

    1

  6. sunshineboy_o_o - 回复
    2016 年 02 月 01 日 下午 2:42

    不错

  7. JXQ - 回复
    2016 年 01 月 24 日 上午 11:00

    受用了

  8. 身材超棒的 - 回复
    2015 年 09 月 21 日 下午 4:35

    真是好人啊~~

  9. J教課 - 回复
    2015 年 08 月 17 日 上午 12:51

    好！！！！！

  10. SWORD - 回复
    2015 年 06 月 03 日 下午 7:16

    唉。。。看了这个才知道，平时自以为是的CSS书写原来都是错误的。只是在得意实现了效果却不知道规范自己的书写方法。。。转走了。

  11. Laoz - 回复
    2015 年 02 月 10 日 下午 10:56

    对我来说相当有用，收下了。

  12. sun言17 - 回复
    2014 年 05 月 29 日 下午 3:44

    css样式规范

  13. - 斯嘉丽 · 卡森 - 回复
    2014 年 03 月 28 日 下午 5:26

    受教咯

  14. 心_有獨钟 - 回复
    2014 年 03 月 20 日 下午 11:43

    CSS样式规范

  15. Rookie_Zoe - 回复
    2014 年 03 月 07 日 下午 2:27

    CSS样式规范

  16. 石头 - 回复
    2014 年 02 月 13 日 上午 9:42

    谢楼主分享

  17. tiankonguse - 回复
    2014 年 01 月 24 日 下午 4:18

    学习一下

  18. 陈韵 - 回复
    2014 年 01 月 24 日 下午 2:47

    好！

  19. Void_c - 回复
    2014 年 01 月 18 日 下午 10:11

    怒转

  20. Void_c - 回复
    2014 年 01 月 18 日 下午 10:08

    书写css的一些规范. 主要是下面的命名实在太赞. = =. 解决我多年被困扰的问题啊.

  21. 赵志佳 - 回复
    2014 年 01 月 07 日 上午 10:52

    转了，

  22. Harrie - 回复
    2013 年 12 月 07 日 下午 10:47

    转

  23. 王攀坤 - 回复
    2013 年 10 月 14 日 上午 11:04

    蛮有用

  24. 没得道的神仙 - 回复
    2013 年 09 月 27 日 下午 3:41

    这是什么软件里的截图 啊

    • 没得道的神仙 -
      2013 年 09 月 27 日 下午 3:41

      麻烦告诉我一下吧

    • 没得道的神仙 -
      2013 年 10 月 03 日 上午 8:35

      谢谢

  25. momo - 回复
    2013 年 09 月 12 日 上午 11:07

    下划线做选择符名称有兼容问题能举个例子么，真没遇到过。而且在很多编辑器下，划线支持双击，中杠不支持双击。

  26. 三叶草 - 回复
    2013 年 09 月 09 日 下午 9:05

    精品！！！学习了！！

  27. 老赵_茶馆 - 回复
    2013 年 09 月 09 日 下午 1:38

    这个要慢慢研究

  28. admin - 回复
    2013 年 09 月 09 日 下午 12:34

    容器名加中杠没问题吧？我以前也用过下划线，现在容易重叠的喜欢用中杠。

    • admin -
      2013 年 09 月 09 日 下午 4:50

      恩，好的。非常感谢。呵呵，平时有时候为了效率就没注意这些。。

  29. admin - 回复
    2013 年 09 月 09 日 下午 12:33

    非常有用，我发现我自己平时就没注意这些。。

  30. 龙仔 - 回复
    2013 年 09 月 07 日 下午 12:02

    。。

  31. 佟亮♣ - 回复
    2013 年 09 月 07 日 上午 10:16

    CSS书写规范、顺序

  32. 萨龙龙 - 回复
    2013 年 09 月 05 日 下午 3:10

    有很多没有注意到，很有帮助。

  33. hiiishare - 回复
    2013 年 09 月 05 日 上午 10:46

    很不错的文章，规范很重要，无疑节约了一定的学习成本。

  34. wy - 回复
    2013 年 09 月 05 日 上午 10:11

    “一些浏览器已经不允许使用下划线来命名CSS选择器（就是不兼容）”想请教下是哪些浏览器不允许？另外与js变量会有什么样的冲突？

  35. 于江水 - 回复
    2013 年 09 月 04 日 下午 7:30

    很不错，但是有部分内容不敢苟同。1，书写顺序按照个人习惯就好，如果强制按照一个顺序，在添加新属性的时候，无疑会增加一定的思考。此外，SCSS 等工具的时候，已经不需要编写很具体的 CSS 了。2，为什么要去掉前面那个 0 ？

  36. Vivian - 回复
    2013 年 09 月 04 日 下午 5:08

    几个拼写错误:指南: guide主导航: mainnav注册: register


Leave a Reply to - 斯嘉丽 · 卡森

点击这里取消回复。