文档章节

CSS样式使用规范

蓝瞳
 蓝瞳
发布于 07/07 10:26
字数 1220
阅读 6
收藏 0

一、代码风格

  1. 采用UTF-8编码,在CSS头部引用 @charset "utf-8";
  2. 使用4个空格作为一个缩进层级,不允许使用2个空格或tab字符
  3. 每行不得超过120个字符,除非单行不可分割
  4. 选择器嵌套层级不大于3级,位置靠后的限定条件应尽可能精确。
  5. 尽量不要使用@import,与<links>相比,@import速度较慢,增加了额外的页面请求,并可能导致其他无法预料的问题。
  6. Media Query不得单独编排,必须与相关的规则一起定义。

二、样式属性顺序

  1. 布局位置(position,top,right,z-index,display,float等)
  2. 尺寸大小(宽度,高度,填充,边距)
  3. 文字系列(字体,行高,字母间距,颜色文字对齐等)
  4. 视觉效果(background,border等)
  5. 其他(动画,转换等)

三,缩写属性和属性值

  1. CSS有些属性是可以缩写的,比如填充,边缘,字体,背景,边框等等。缩写代码可以提高用户的阅读体验
  2. 当数值为小数时,小数点前面的“0”可以去除
  3. “0像素”后面的单位可以去除
  4. 16进制的颜色代码重叠的字符可以缩写的尽量缩写

四,规则声明块样式规范

  1. 当规则声明块中有多个样式声明时,每条样式独占一行。
  2. 列表属性并排书写时,用逗号分隔,逗号后必须跟一个空格 3 . 选择器与左大括号 {之间必须加一个空格
  3. 属性名与冒号之间不允许包含空格,冒号与属性值之间必须包含空格
  4. 在每条样式后面都以分号; 结尾。
  5. 规则声明块的右大括号} 独占一行。
  6. 所有最外层引号使用单引号 ' ' 。
  7. 当一个属性有多个属性值时,以逗号, 分隔属性值,每个逗号后添加一个空格,当单个属性值过长时,每个属性值独占一行。
  8. 每个规则声明间用空行分隔。

五,命名规范

  1. 一律小写

  2. 尽量用英文

  3. 命名短且语义化要好

  4. 名字长的单词可以选择使用烤串命名法,中间加横线来为选择器命名

    1. 布局:以g 为命名空间,例如:.g-wrap . .g-header. .g-content。
    2. 状态:以s 为命名空间,表示动态的. 具有交互性质的状态,例如:.s-current. s-selected。
    3. 工具:以u 为命名空间,表示不耦合业务逻辑的. 可复用的的工具,例如:u-clearfix. u-ellipsis。
    4. 组件:以m 为命名空间,表示可复用. 移植的组件模块,例如:m-slider. m-dropMenu。
    5. 钩子:以j 为命名空间,表示特定给JavaScript 调用的类名,例如:j-request. j-open。
  5. 不建议使用下划线来命名,存在浏览器兼容性问题,其次是JavaScript的变量命名也是用下划线,容易造成混淆。

  6. 不要滥用id标识,id在JS中是唯一的,不能多次使用,应该按需使用

  7. 统一语义理解和命名(如表所示)</links>

语义 命名 简写
布局(.g-)
文档 doc doc
头部 head hd
主体 body bd
尾部 foot ft
主栏 main mn
主栏子容器 mainc mnc
侧栏 side sd
侧栏子容器 sidec sdc
盒容器 wrap/box wrap/box
模块(.m-)、元件(.u-)
语义 命名 简写
导航 nav nav
子导航 subnav snav
面包屑 crumb crm
菜单 menu menu
选项卡 tab tab
标题区 head/title hd/tt
内容区 body/content bd/ct
列表 list lst
表格 table tb
表单 form fm
热点 hot hot
排行 top top
登录 login log
标志 logo logo
广告 advertise ad
搜索 search sch
幻灯 slide sld
提示 tips tips
帮助 help help
新闻 news news
下载 download dld
注册 regist reg
投票 vote vote
版权 copyright cprt
结果 result rst
标题 title tt
按钮 button btn
输入 input ipt
功能(.f-)
语义 命名 简写
浮动清除 clearboth cb
向左浮动 floatleft fl
向右浮动 floatright fr
内联块级 inlineblock ib
文本居中 textaligncenter tac
文本居右 textalignright tar
文本居左 textalignleft tal
垂直居中 verticalalignmiddle vam
溢出隐藏 overflowhidden oh
完全消失 displaynone dn
字体大小 fontsize fs
字体粗细 fontweight fw
皮肤(.s-)
语义 命名 简写
字体颜色 fontcolor fc
背景 background bg
背景颜色 backgroundcolor bgc
背景图片 backgroundimage bgi
背景定位 backgroundposition bgp
边框颜色 bordercolor bdc
状态(.z-)
语义 命名 简写
选中 selected sel
当前 current crt
显示 show show
隐藏 hide hide
打开 open open
关闭 close close
出错 error err
不可用 disabled dis

本文转载自:https://blog.csdn.net/qq_38128179/article/details/80735130

蓝瞳

蓝瞳

粉丝 26
博文 24
码字总数 4044
作品 0
广州
程序员
私信 提问
Web前端相关段子

Web标准:结构、样式和行为分离 使用语义化标签 0)标签的语义:使用有良好语义的标签,能够很好地实现自我解释,方便搜索引擎理解网页结构,抓取重要内容。去样式后也会根据浏览器的默认样式...

v1-alpha
2015/12/22
44
0
vue组件中的样式属性scoped实例

vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素 。接下来通过本文给大家分享vue组件中的样式属性scoped实例详解 Scoped CSS Scoped CSS规范是Web组件产生不...

前端攻城老湿
2018/11/15
139
0
浅谈CSS代码管理OOCSS、SMACSS、BEMCSS三种设计模式

面向对象的OOCSS,是由Nicole Sullivan提出的css理论,虽说是理论,实则更像一种程序员约定的规范。 是一种把面向对象方法学应用到 CSS 代码组织和管理中的实践。面向对象方法学中的很多理念...

皇上洗碗
2017/10/27
16
0
浅谈OOCSS、SMACSS、BEM三种设计模式与前端架构优化的关系

浅谈OOCSS、SMACSS、BEM三种设计模式与前端架构优化的关系 面向对象的OOCSS,是由Nicole Sullivan提出的css理论,虽说是理论,实则更像一种程序员约定的规范。 ... ... ... 对a修改样式可能用...

佀无极
2018/09/27
0
0
CSS优化工具--CSSTidy

CSSTidy 是一个开源的样式表CSS优化工具,使用csstidy 可以轻易的将你的CSS 样式压缩,压缩率能达到1/4以上,还可以自动将CSS代码中的注释、多余的属性去掉,并将相似的样式合并以达到优化压...

匿名
2009/06/11
4.7K
0

没有更多内容

加载失败,请刷新页面

加载更多

springboot2.0 maven打包分离lib,resources

springboot将工程打包成jar包后,会出现获取classpath下的文件出现测试环境正常而生产环境文件找不到的问题,这是因为 1、在调试过程中,文件是真实存在于磁盘的某个目录。此时通过获取文件路...

陈俊凯
今天
6
0
BootStrap

一、BootStrap 简洁、直观、强悍的前端开发框架,让web开发更加迅速、简单 中文镜像网站:http://www.bootcss.com 用于开发响应式布局、移动设备优先的WEB项目 1、使用boot 创建文件夹,在文...

wytao1995
今天
10
0
小知识:讲述Linux命令别名与资源文件的区别

别名 别名是命令的快捷方式。为那些需要经常执行,但需要很长时间输入的长命令创建快捷方式很有用。语法是: alias ppp='ping www.baidu.com' 它们并不总是用来缩短长命令。重要的是,你将它...

老孟的Linux私房菜
今天
8
0
《JAVA核心知识》学习笔记(6. Spring 原理)-5

它是一个全面的、企业应用开发一站式的解决方案,贯穿表现层、业务层、持久层。但是 Spring 仍然可以和其他的框架无缝整合。 6.1.1. Spring 特点 6.1.1.1. 轻量级 6.1.1.2. 控制反转 6.1.1....

Shingfi
今天
8
0
Excel导入数据库数据+Excel导入网页数据【实时追踪】

1.Excel导入数据库数据:数据选项卡------>导入数据 2.Excel导入网页数据【实时追踪】:

东方墨天
今天
11
1

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部