新闻资讯 我们累计服务了省内外300多客户,落地执行500多个案例

CSS中的使用规范

日期: 2020-03-03 点击: 来源: 天悦互动

  CSS指层叠样式表(CascadingStyleSheets),定义如何显示HTML元素,但由于CSS天生全局性,随着项目复杂度增加,极易出现样式覆盖以及其它的问题。
 
  1.通用规范
 
  文件编码
 
  为了避免内容乱码,统一使用UTF-8编码保存。
 
  样式文件第一行设置字符集为UTF-8
 
  @charset'UTF-8';/*注意字符集说明应在第一行*/
 
  缩进规范
 
  统一使用两个空格缩进
 
  2.初始化规范
 
  各浏览器厂商的初始样式都不一样,为了消除不同浏览器对HTML文本呈现的差异,我们常引入一些初始化样式,如normalize.css、reset.css等,当对于这些样式的引入我们需要注意下面几种情况:
 
  不使用UI框架,由零开始搭建从零开始搭建的情况下,进行样式初始化,在项目最开始的时候就引入,不要在开发中途引入,避免不可预知的样式冲突。
 
  不使用UI框架,但使用了部分插件插件往往都带有自己特有的样式,如富文本插件,在开发中途使用初始化样式有可能导致样式错乱,所以不建议大范围的初始化,只需简单进行初始化即可。
 
  *{
 
  padding:0;
 
  margin:0;
 
  }
 
  已使用UI框架在明确知道需要使用UI框架的时候,不使用第三方初始化样式,不管是在项目开始前还是进行中,因为UI框架一般都自带初始化,额外引入了反而会影响原有效果。
 
  3.代码规范
 
  命名规范
 
  class应以功能或内容命名,不以表现形式命名class与id单词字母小写,多个单词组成时,采用中划线-分隔使用唯一的id作为Javascripthook,同时避免创建无样式信息的class
 
  代码风格
 
  统一使用展开格式,不推荐紧凑格式
 
  /*展开格式*/
 
  .test{
 
  color:red;
 
  font-size:12px;
 
  }
 
  /*紧凑格式*/
 
  .test{
 
  color:red;
 
  font-size:12px;
 
  }
 
  统一两个空格缩进
 
  属性声明结尾加分号
 
  选择器与左括号之间一个空格,属性冒号后一个空格
 
  /*推荐*/
 
  .test{
 
  color:red;
 
  font-size:12px;
 
  }
 
  /*不推荐*/
 
  .test{
 
  color:red;
 
  font-size:12px;
 
  }
 
  不要为0指明单位
 
  颜色值和属性值十六进制数值能用简写的尽量用简写
 
  /*推荐*/
 
  .test{
 
  color:#fff;
 
  }
 
  /*不推荐*/
 
  .test{
 
  color:#ffffff;
 
  }
 
  引号使用
 
  url()、属性选择符、属性值使用单引号。
 
  清除浮动
 
  当元素需要撑起高度以包含内部的浮动元素时,通过对伪类设置clear或触发BFC的方式进行clearfix。尽量不使用增加空标签的方式。
 
  触发BFC的方式很多,常见的有:
 
  float非none
 
  position非static
 
  overflow非visible
 
  字体规范
 
  对外商用网站,不要用font-face引入微软雅黑字体,避免侵权(包括图片内容)
 
  需要在Windows平台显示的中文内容,其字号应不小于12px
 
  网站上使用微软雅黑字体有三种形式:
 
  1、【侵权】图片中使用微软雅黑字体,比如网站头图
 
  2、【安全】网站CSS用font-family声明网站使用微软雅黑字体,比如文章标题和正文
 
  3、【侵权】网站通过font-face引用微软雅黑,这种方式不常见
 
  选择器规范
 
  在严格遵照BEM(BlockElementModifier)时,建议只使用类选择器,但BEM书写麻烦,所以建议如下
 
  禁用通用选择器*
 
  不使用无具体语义定义的标签选择器
 
  属性顺序
 
  CSS属性顺序是CSS良好编码风格的一部分,有助于提高代码可读性,便于发现代码问题,有利于团队合作,但在项目中发现部分同学在书写属性顺序时较为随意,想到一个属性就写一个。
 
  建议使用下列顺序进行书写
 
  定位属性(position、display、float、left、right)
 
  尺寸属性(width、height、padding、margin、border)
 
  字体属性(color、font、text-align)
 
  其他属性(background、cursor、outline)
 
  目的是在浏览代码时,能逐步清晰目标元素的效果。
 
  .test{
 
  display:block;
 
  position:relative;
 
  float:left;
 
  width:100px;
 
  height:100px;
 
  margin:010px;
 
  padding:20px0;
 
  font-size:12px;
 
  color:#333;
 
  background:rgba(0,0,0,0.5);
 
  border-radius:10px;
 
  }
 
  4.注释规范
 
  单行注释
 
  注释以/*开始,以*/结束,注释内不能嵌套注释,注释内容前后空一个空格。
 
  /*推荐的单行注释*/
 
  /*不推荐的单行注释*/
 
  注:在sass和less等预处理语言上也可以使用双斜线注释,但编译后注释内容不会出现在css文件中,所以建议统一使用/**/注释。
 
  模块注释
 
  有时候我们需要对一个模块(一段代码块)进行功能性说明,并希望能明显区分其它代码,我们可以模块注释的方式。
 
  注释以/*开始,以*/结束,前后空一个空格,第一行填写描述,最后一行行填写分割线。
 
  /*推荐的模块注释
 
  ----------------------------------------------------*/
 
  /*不推荐的模块注释----------------------------------------------------*/
 
  *文件信息注释
 
  如果需要对一个文件进行功能性说明,方便其他人快速明白该文件的作用,推荐在文件开头(字符集说明下)写入下列注释,注释内容包括文件描述、创建人、创建时间等。
 
  @charset"UTF-8";
 
  /**
 
  *@desc文件功能描述,方便其他人快速理解
 
  *@author创建人
 
  *@date创建时间
 
  */
 
  5.覆盖规范
 
  尽可能少用importent
 
  vue单文件组件统一使用css/less/sassscoped
 
  每个页面/组件需要有一个全局唯一的标识id/class,属于它下面的样式都需要加上该唯一标识
 
  避免全局修改已有样式,必须具体到页面上(通过权重)
 
  禁用全匹配*选择器(特殊情况除外,如初始化)
 
  vue单文件组件修改样式不生效可使用/deep/或>>>
 
  6.媒体查询
 
  对于内部管理系统,商务多使用ThinkPad笔记本,屏幕分辨率为1366*768。建议使用ResolutionTest浏览器拓展进行浏览器窗口大小调试。
 
  常用尺寸如下
 
  大小 描述
 
  ≥1366px 大屏幕大桌面显示器
 
  ≥1200px 中等屏幕桌面显示器
 
  ≥992px 中等屏幕桌面显示器
 
  ≥768px 小屏幕平板
 
  <768px 超小屏幕手机
 
  优先PC端
 
  默认按最大尺寸进行布局,当尺寸缩小时逐步变成移动端布局
 
  body{
 
  background:gray;
 
  }
 
  @mediascreenand(max-width:1366px){
 
  body{
 
  background:red;
 
  }
 
  }
 
  @mediascreenand(max-width:1200px){
 
  body{
 
  background:yellow;
 
  }
 
  }
 
  @mediascreenand(max-width:920px){
 
  body{
 
  background:green;
 
  }
 
  }
 
  @mediascreenand(max-width:768px){
 
  body{
 
  background:black;
 
  }
 
  }
 
  优先移动端
 
  默认按最小尺寸进行布局,当尺寸放大时逐步变成PC端布局
 
  body{
 
  background:gray;
 
  }
 
  @media(min-width:768px){
 
  body{
 
  background:red;
 
  }
 
  }
 
  @media(min-width:920px){
 
  body{
 
  background:green;
 
  }
 
  }
 
  @media(min-width:1200px){
 
  body{
 
  background:yellow;
 
  }
 
  }
 
  @media(min-width:1366px){
 
  body{
 
  background:red;
 
  }
 
  }
 
  如果需要做打印样式进行适配,需要使用@mediaprint
 
  @mediaprint{
 
  body{
 
  background:#fff;
 
  }
 
  }
 
  7.单位规范
 
  CSS单位有两种,分别是绝对单位和相对单位。
 
  常用绝对单位
 
  px:像素(计算机屏幕上的一个点)
 
  cm:厘米
 
  in:英寸
 
  pt:磅(1pt等于1/72英寸)
 
  常用相对单位
 
  %:父元素百分比
 
  vw:视口宽度百分比
 
  vh:视口高度百分比
 
  em:当前字体倍数
 
  rem:根元素字体倍数
 
  *rpx:微信小程序专用,规定屏幕宽为750rpx
 
  使用较多的单位有px、%、rem三种,建议PC端用px单位、移动端用rem,需要具体控制尺寸还是使用px
 
  备注:如果需要计算不同单位下的值,可以使用css3方法calc()_
 
  8.兼容性规范
 
  私有属性的使用
 
  正是由于浏览器厂商的不同,导致了一些样式需要加前缀才生效,下面的常见的浏览器内核和前缀
 
  浏览器 内核 前缀
 
  Firefox Gecko -moz-
 
  Chrome WebKit -webkit-
 
  IE Trident -ms-
 
  Safari WebKit -webkit-
 
  Opera Presto -o-
 
  国内知名浏览器 WebKit -webkit-
 
  常见手机浏览器 WebKit -webkit-
 
  CSS3浏览器私有前缀在前,标准前缀在后
 
  .test{
 
  -webkit-border-radius:10px;
 
  -moz-border-radius:10px;
 
  -o-border-radius:10px;
 
  -ms-border-radius:10px;
 
  border-radius:10px;
 
  }
 
  备注:在webpack环境下,可以使用postcss-loader自动添加私有前缀_

热门新闻

Popular News