首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CSS 代码的书写规范、顺序

CSS 代码的书写规范、顺序

作者头像
Jeff
发布2018-01-19 16:15:04
3.3K0
发布2018-01-19 16:15:04
举报
文章被收录于专栏:DeveWorkDeveWork

本文来自设计达人网站,Jeff 看到该文感觉非常有必要学习分享,so,转载在这里,感谢原作者——写了这么久的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-order3
css-written-order3
css-written-order3
css-written-order3

CSS书写规范

使用CSS缩写属性

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

abbreviation3
abbreviation3
abbreviation3
abbreviation3

去掉小数点前的“0”

del-zero3
del-zero3
del-zero3
del-zero3

简写命名

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

name3
name3
name3
name3

16进制颜色代码缩写

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

color-abb3
color-abb3
color-abb3
color-abb3

连字符CSS选择器命名规范

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

2.不能用“_”下划线来命名CSS选择器,为什么呢?

  • 一些浏览器已经不允许使用下划线来命名CSS选择器(就是不兼容);
  • 能良好区分JavaScript变量命名.
underline3
underline3
underline3
underline3

不要随意使用id

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

css-id3
css-id3
css-id3
css-id3

为选择器添加状态前缀

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

status-select3
status-select3
status-select3
status-select3

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 指南:guild 服务: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 主导航:mainbav 子导航:subnav 顶导航:topnav 边导航:sidebar 左导航:leftsidebar 右导航:rightsidebar 菜单:menu 子菜单:submenu 标题: title 摘要: summary

(3)功能

标志:logo 广告:banner 登陆:login 登录条:loginbar 注册:regsiter 搜索: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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2013/09/04,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • CSS书写顺序
  • CSS书写规范
    • 使用CSS缩写属性
      • 去掉小数点前的“0”
        • 简写命名
          • 16进制颜色代码缩写
            • 连字符CSS选择器命名规范
              • 不要随意使用id
                • 为选择器添加状态前缀
                • CSS命名规范(规则)
                  • 常用的CSS命名规则
                    • id的命名:
                    • CSS样式表文件命名
                    相关产品与服务
                    容器服务
                    腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
                    领券
                    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档