自己整理的前端编码规范（HTML/CSS）

一、HTML规范

文档规范

使用 HTML5 的文档声明类型 :  

如果你的页面添加了那么，那么就等同于开启了标准模式。浏览器会按照W3C标准解析渲染页面。

脚本加载

所有浏览器推荐写法

只兼容现代浏览器（IE9+）推荐写法

语义化

使用语义化标签

推荐

html 代码:


  
  
My page title




  
  

    
Home
    
News
    
About
  




  
  

    
    

      
      
All news articles
    

    
    

      
      

        
        
Good article
        
        Introduction sub-title
      

      
      

        
This is a good example for HTML semantics
      
      
      

        
I think I'm more on the side and should not receive the main credits
      
      
      

        
        
This article was created by David 1 month ago
      
    

    
    

      
Related sections: Events, Public holidays
    
  




  Copyright 2014

alt标签不为空

结构、表现、行为三者分离

• 不使用行内样式（  ）
• 不在元素上使用 style 属性（ 

  ---

   ）
• 不使用行内脚本（  ）
• 不使用表象元素（ i.e. , , , ,  ）
• 不使用表象 class 名（ i.e. red, left, center ）
• 不使用超过一到两张样式表
• 不使用超过一到两个脚本

这里多说一句， 用 JavaScript 在写 HTML 和 CSS的方式已经较为普遍。比如， React 在 JavaScript 里面实现了对 HTML 和 CSS 的封装，我们通过封装去操作 HTML 和 CSS。也就是说，网页的结构和样式都通过 JavaScript 操作。

由于 CSS 的封装非常弱，导致了一系列的第三方库，用来加强 React 的 CSS 操作。它们统称为 CSS in JS，意思就是使用 JS 语言写 CSS。

 CSS in JS 使用 JavaScript 的语法，是 JavaScript 脚本的一部分，不用从头学习一套专用的 API，也不会多一道编译步骤

HTML只关注内容

• HTML只显示展示内容信息
• 不要引入一些特定的 HTML 结构来解决一些视觉设计问题
• 不要将img元素当做专门用来做视觉设计的元素
• 样式上的问题应该使用css解决

二、CSS规范

id和class的命名

ID和class的名称使用可以反应元素目的和用途的名称

推荐：

.heavy {
  font-weight: 800;
}

.important {
  color: red;
}

合理的使用ID

一般情况下ID不应该被用于样式，并且ID的权重很高，所以不使用ID解决样式的问题，而是使用class

css选择器中避免使用标签名

使用子选择器

推荐：

.content > .title {
  font-size: 2rem;
}

尽量使用缩写属性

border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;

属性顺序

尽量按照下面的顺序进行属性开发

结构性属性：

1. display
2. position, left, top, right etc.
3. overflow, float, clear etc.
4. margin, padding

表现性属性：

• background, border etc.
• font, text

示例代码：

.box {
  display: block;
  position: absolute;
  left: 30%;
  right: 30%;
  overflow: hidden;
  margin: 1em;
  padding: 1em;
  background-color: #eee;
  border: 3px solid #ddd;
  font-family: 'Arial', sans-serif;
  font-size: 1.5rem;
  text-transform: uppercase;
}