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

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

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

  1. Frankie - 回复

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

  2. 依旧独特1012 - 回复

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

  3. 孟洛 - 回复

    赞一个,长见识了!

  4. 风歌 - 回复

    逼死强迫症的节奏

  5. 如花是我哥 - 回复

    1

  6. sunshineboy_o_o - 回复

    不错

  7. JXQ - 回复

    受用了

  8. 身材超棒的 - 回复

    真是好人啊~~

  9. J教課 - 回复

    好!!!!!

  10. SWORD - 回复

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

  11. Laoz - 回复

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

  12. sun言17 - 回复

    css样式规范

  13. - 斯嘉丽 · 卡森 - 回复

    受教咯

  14. 心_有獨钟 - 回复

    CSS样式规范

  15. Rookie_Zoe - 回复

    CSS样式规范

  16. 石头 - 回复

    谢楼主分享

  17. tiankonguse - 回复

    学习一下

  18. 陈韵 - 回复

    好!

  19. Void_c - 回复

    怒转

  20. Void_c - 回复

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

  21. 赵志佳 - 回复

    转了,

  22. Harrie - 回复

  23. 王攀坤 - 回复

    蛮有用

  24. 没得道的神仙 - 回复

    这是什么软件里的截图 啊

    • 没得道的神仙 -

      麻烦告诉我一下吧

    • 没得道的神仙 -

      谢谢

  25. momo - 回复

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

  26. 三叶草 - 回复

    精品!!!学习了!!

  27. 老赵_茶馆 - 回复

    这个要慢慢研究

  28. admin - 回复

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

    • admin -

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

  29. admin - 回复

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

  30. 龙仔 - 回复

    。。

  31. 佟亮♣ - 回复

    CSS书写规范、顺序

  32. 萨龙龙 - 回复

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

  33. hiiishare - 回复

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

  34. wy - 回复

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

  35. 于江水 - 回复

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

  36. Vivian - 回复

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


{ 发表评论 }