html和css开发规范

头像
吴小风
    阅读 6 分钟
    1

    guifan2.png

    前言

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

    html格式规范

    语义化标签

    我们应该根据元素本身的用途去使用他们，而不是为了简便使用一堆<div>、<span>等标签。主要原因如下：

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

    不推荐案例：

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

    推荐案例：

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

    统一使用html5文档类型

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

    <!doctype html>

    html指定基本属性

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

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

    使用案例：

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

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

    我们需要为多媒体元素加上附加信息。主要原因包括：

    1. 由于网络的原因，可能图片等多媒体没有下载下来
    2. 如果考虑屏幕阅读器的话，多媒体需要使用附加的信息才能被阅读器识别

    不推荐方案：

    <img src="logo.jpg" />

    推荐方案：

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

    标签属性的处理方案

    1、属性顺序
    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用于标识具体组件，应当谨慎使用（例如，页面内的书签），因此排在第二位。

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

    <input type="text" disabled />

    3、用双引号包裹属性值
    属性值可以用单引号包裹，也可以用双引号，约定统一使用双引号包裹
    推荐案例：

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

    标签嵌套闭合

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

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

    推荐的案例：

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

    按照功能模块添加注释

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

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

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

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

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

    内容和样式分离

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

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

    css规范

    文件引用

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

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

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

    推荐案例：

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

    3、在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命名应根据大多数人的习惯，以及功能模块来命名。
    1、命名格式
    不推荐案例：

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

    推荐案例：

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

    2、常见的命名建议

    头：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按照一定的顺序，不一定按照下面推荐的来进行，而是根据个人自己的习惯，不能杂乱无章。

    1. 位置属性(position, top, right, z-index, display, float)
    2. 盒子模型属性(width, height, padding, margin, border)
    3. 文字相关(font, line-height, letter-spacing, color, text-align)
    4. 背景相关(background)
    5. 其它属性(opacity)
    6. 最后是动画属性(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开发规范

    htmlcss前端vue.jsbootstrap
    吴小风
    24 声望1 粉丝
    « 上一篇
    日常工作必备之linux常用命令分类归纳
    下一篇 »
    一文搞定ES6常用API

    引用和评论

    推荐阅读
    头像
    前端代码格式化问题总结

    吴小风阅读 3.8k

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 9.9k评论 7

    头像
    网页设计的垂直居中

    寒青赞 41阅读 5.2k评论 3

    头像
    CSS团队协作规范

    寒青赞 38阅读 7.3k

    头像
    100个React最佳实践小技巧

    夕水赞 25阅读 6.5k评论 4

    头像
    前端开发工具

    寒青赞 19阅读 5.2k

    头像
    开发插件集合

    寒青赞 14阅读 3.5k

    0 条评论
    得票最新