html和css开发规范

时间 2020-11-30

标签 css html html5 git github web bootstrap 浏览器缓存网络栏目 HTML 繁體版

原文原文链接

前言

最近看了一些同事留下的代码，有种天马行空，为所欲为的感受。大多数旧的代码冗余复杂，想进行优化却不敢删除他们的代码，开发新功能只能在这基础上进行增长，致使代码进一步臃肿，感触良多。写一篇规范分享一下，因为JavaScript规范太多后续在写一篇博客补充。css

html格式规范

语义化标签

咱们应该根据元素自己的用途去使用他们，而不是为了简便使用一堆<div>、<span>等标签。主要缘由以下：html

1. 代码结构清晰，别人阅读和修改方便。
2. seo优化：搜索引擎判断和收录页面内容的主要指标之一就是标签，例如看到<h1>标签搜索引擎就知道页面表达的主题是<h1>标签内部的信息，若是整个页面都是<div>和<span>标签搜索引擎就没法抓住重点

不推荐案例：html5

<p>标题</p>
<div>
    <p>列表元素1</p>
    <p>列表元素2</p>
    <p>列表元素3</p>
</div>

推荐案例：git

// 标题使用<h1>标签，列表使用<ul>或者<ol>标签
<h2>标题</h2>
<ul>
    <li>列表元素1</li>
    <li>列表元素2</li>
    <li>列表元素3</li>
</ul>

统一使用html5文档类型

统一使用html5文档类型，格式以下所示。主要做用是告诉浏览器用最新<html>规范来解析<html>语法，避免出现怪异现象。全部标签不要大写，即使是 doctype 标签。github

<!doctype html>

html指定基本属性

为了让浏览器保持更好的兼容性，要求添加以下基本属性。
基本属性：web

一、为文档指定lang属性,有助于语音合成工具肯定其所应该采用的发音,有助于翻译工具肯定其翻译时所应遵照的规则等等。
二、charset属性告诉流浪器用什么编码格式显示网页，不指定该属性在Safari等部分浏览器会出现中文乱码现象
三、X-UA-Compatible指定IE=edge主要是告诉IE浏览器默认用什么引擎打开网页，这个还能够指定IE=7等其它版本。

使用案例：bootstrap

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">    
  </head>  
</html>

为多媒体元素加上回退方案

咱们须要为多媒体元素加上附加信息。主要缘由包括：浏览器

因为网络的缘由，可能图片等多媒体没有下载下来
若是考虑屏幕阅读器的话，多媒体须要使用附加的信息才能被阅读器识别

不推荐方案：缓存

<img src="logo.jpg" />

推荐方案：网络

<img src="logo.jpg" alt="规定图像的替代文本" />

标签属性的处理方案

一、属性顺序
HTML属性应当按照如下给出的顺序依次排列，确保代码的易读性。
class
id, name
data-*
src, for, type, href, value
title, alt
role, aria-*
推荐案例：

<a class="..." id="..." data-toggle="modal" href="#">
  Example link
</a>

<input class="form-control" type="text">

<img src="..." alt="...">

class用于标识高度可复用组件，所以应该排在首位。id用于标识具体组件，应当谨慎使用（例如，页面内的书签），所以排在第二位。

二、约定布尔属性值
部分html布尔属性诸如disabled、checked、readonly、required等等值能够省略，能够为布尔类型，能够等于属性名称。，这里统一约定使用省略属性值的格式。
推荐案例：

<input type="text" disabled />

三、用双引号包裹属性值
属性值能够用单引号包裹，也能够用双引号，约定统一使用双引号包裹
推荐案例：

<p class="error">aaaaaa</p>

标签嵌套闭合

全部标签必须正确嵌套和闭合，可使用W3C验证器检测代码。
不推荐的案例：

<div>
    <p>
        标签嵌套错误
</div>
    </p>
// --------------------------------
<div>
    <p>
        标签没有闭合
</div>

推荐的案例：

<div>
    <p>
        标签使用正确
    </p>
</div>

按照功能模块添加注释

合理的添加注释阅读和编码会更容易。添加注释的地方建议按照功能或者模块来添加，添加注释的格式建议以下：

一、注释成对出现，注释的格式和html元素相同用，即尾部的注释添加/结束。

<!-- 公告列表模块 -->
<div class="m-post"
...
<!-- /公告列表模块 -->

二、注释成对出现，注释中标注开始和结束。

<!-- 公告列表模块 start -->
<div class="m-post"
...
<!-- /公告列表模块 end -->

内容和样式分离

html只关注内容，不关注页面的样式。咱们选用html标签考虑的是这部份内容用什么标签表达更合适，而不是有哪一个标签的样式可让咱们少些css代码。常见的错误以下：

错误的使用style属性添加样式
错误的使用表象元素b标签、i标签等添加样式
table错误的使用cellpadding、border等属性设置样式
错误的使用<br/>换行

css规范

文件引用

一、不使用@import
css样式文件有两种引入方式，一种是link元素，另外一种是@import。建议只在打包工具中使用@import引入mixin等公共样式文件，html中使用<link>替代@import。

二、去掉引用资源中的引号
引用资源可使用引号，也能够不使用引号，统一约定不使用引号。
不推荐案例：

div {
  background-image: url("./poster.png");
}

推荐案例：

div {
  background-image: url(./poster.png);
}

三、在head元素中引用css文件
避免在页面style标签内引用样式或者直接在元素上内联样式，应该将样式抽离出来放在单独的css文件里。缘由是由于内容和样式分离，易于维护和管理，而且css文件能够被缓存，重用等

*符号处理

css代码避免使用*，缘由是由于它标识浏览器所支持的所有html属性。拿css代码重置做为说明。

不推荐案例：

*{margin：0；padding：0;}

推荐案例：

body,dl,dd,h1,h2,h3,h4,h5,h6,p,form,ol,ul{margin：0；padding：0;}

说明：推荐案例代码稍微多，可是性能比上面的方式好，在渲染的时候，只匹配body,dl,dd,h1,h2,h3,h4,h5,h6,p,form,ol,ul这里面的元素，这些元素带有margin和padding，须要重置。而其它span等元素则无需进行内外边距处理。

避免无心义的选择器

不推荐案例：

.header #logo img{
    width:200px;
    ...
}

推荐案例：

#logo img{
    width:200px;
    ...
}

说明：咱们的代码中应注意避免使用一些无实际意义的css代码，例如上述案例中#logo优先级已经很高了，前面加上.header选择器不少余。并且建议元素的嵌套最好不要超过3层，过分的嵌套会使得代码臃肿，并且也会下降浏览器的解析效率。

公共代码抽离

不推荐案例：

.btn-default { 
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  padding: 6px 12px;
  font-size: 14px;  
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}

.btn-primary { 
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  padding: 6px 12px;
  font-size: 14px;  
  color: #fff;
  background-color: #286090;
  border-color: #204d74;
}

推荐案例：

.btn { 
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;  
}

.btn-default {  
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}

.btn-primary {   
  color: #fff;
  background-color: #286090;
  border-color: #204d74;
}

说明：公共的样式尽可能抽离出来，能够是模块内共享，也能够是全局共享。上述案例是bootstrap框架源码按钮样式的一部分。.btn-default样式和.btn-primary样式区别仅仅在与不一样状态下的颜色区别，其它代码相同。在举个全局共享的案例：

//单行文本超出显示省略号
.text-ellipsis{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

css命名规范

有句俗语叫作见名知意，css命名应根据大多数人的习惯，以及功能模块来命名。
一、命名格式
不推荐案例：

// css名字用驼峰式命名
.textEllipsis{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

推荐案例：

// css名字用-分割
.text-ellipsis{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

二、常见的命名建议

头：header
尾：footer
导航：nav
导航条：navbar
子导航：subnav
内容外围容器：wrapper/container
侧栏：sidebar
登陆条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
菜单：menu
子菜单：submenu
搜索：search
版权：copyright
内容：content
标签：tags
文章列表：list
提示信息：tips
标题：title
指南：guide
服务：service
注册：regsiter
状态：status
摘要: summary

属性书写顺序

建议书写css按照必定的顺序，不必定按照下面推荐的来进行，而是根据我的本身的习惯，不能杂乱无章。

位置属性(position, top, right, z-index, display, float)
盒子模型属性(width, height, padding, margin, border)
文字相关(font, line-height, letter-spacing, color, text-align)
背景相关(background)
其它属性(opacity)
最后是动画属性(animation, transition等)

0与单位

若是属性值为0，则不须要为0加单位。
不推荐的案例：

.header {
    margin: 0px;
    padding: 0px;
}

推荐的案例：

.header {
    margin: 0;
    padding: 0;
}

浏览器前缀处理

为了提升兼容性，须要添加浏览器前缀，而且把非前缀版本放在最后。另外一个解决方案是在开发过程当中使用Autoprefixer等第三方库自动添加前缀。
推荐案例:

header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

书写格式

全部css规则须要换行，多组选择器之间须要换行，建议你们使用格式化工具或者插件。
不推荐案例：

.dropdown-menu > .active > a,.dropdown-menu > .active > a:hover,.dropdown-menu > .active > a:focus {
  color: #fff;
  text-decoration: none;
  background-color: #337ab7;
  outline: 0;
}

推荐案例：

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  color: #fff;
  text-decoration: none;
  background-color: #337ab7;
  outline: 0;
}

其它注意事项

尽可能少使用id命名，避免出现不可控问题
每条规则结束后都必须加上分号
当使用《css揭秘》等书籍或博客提供的hack技巧时候，必定要添加注释，解释清楚
当咱们自定义的组件与框架组件重名时候，咱们应该加上本身工做组或项目的特定前缀进行区分。例如案例：

//bootstrap框架样式命名为table
<table class="table">
  ...
</table>

//自定义框架样式能够命名为dms-table,其中dms是项目组简写
<table class="dms-table">
  ...
</table>

总结

制定规范可让咱们的减小无畏的思考，能够写出高质量的代码，能够减小后期维护的成本，但愿你们引发重视。
更多能够参考：bootstrap开发规范