search

soonfy / issue-blog

blog using issue
0 stars 0 forks source link

html/css code style #48

Open soonfy opened 6 years ago

soonfy commented 6 years ago

通用规则

协议

  1. 使用 https 协议 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    @import 'https://fonts.googleapis.com/css?family=Open+Sans';

风格

  1. 使用 2 个空格缩进

    <ul>
<li>Fantastic
<li>Great
</ul>
    .example {
color: blue;
}

  2. 全部使用小写

    <img src="google.png" alt="Google">
    color: #e5e5e5;

  3. 移除末尾空格

基本信息

  1. 编码采用 UTF-8 (no BOM)
  2. 注释
  3. TODO

html

风格

  1. document type 使用 html5

    不用关闭空标签

    <!DOCTYPE html>
<br>

  2. 验证 html 标签

    <!DOCTYPE html>
<meta charset="utf-8">
<title>Test</title>
<article>This is only a test.</article>

  3. 语义化标签

    <a href="recommendations/">All recommendations</a>

  4. 多媒体元素添加替代文本

    <img src="spreadsheet.png" alt="Spreadsheet screenshot.">

  5. 分开 html，css，js

  6. 不使用实体引用

    The currency symbol for the Euro is “€”.

  7. 省略选择性标签

    <!DOCTYPE html>
<title>Saving money, saving bytes</title>
<p>Qed.

  8. 省略 type 属性

    <link rel="stylesheet" href="https://www.google.com/css/maia.css">
<script src="https://www.google.com/js/gweb/analytics/autotrack.js"></script>

格式

  1. 块级元素，列表，表格缩进单独使用一行

    <blockquote>
<p><em>Space</em>, the final frontier.</p>
</blockquote>
<ul>
<li>Moe
<li>Larry
<li>Curly
</ul>
<table>
<thead>
<tr>
  <th scope="col">Income
  <th scope="col">Taxes
<tbody>
<tr>
  <td>$ 5.00
  <td>$ 4.50
</table>

  2. 断行缩进 4 个字符

    <md-progress-circular
md-mode="indeterminate"
class="md-accent"
ng-show="ctrl.loading"
md-diameter="35">
</md-progress-circular>

  3. 双引号包含属性值

    <a class="maia-button maia-button-secondary">Sign in</a>

css

风格

  1. 验证 css

  2. 使用有意义的或者通用的 id 或者类名

    #gallery {}
#login {}
.video {}
.aux {}
.alt {}

  3. id 或者类名要短而有意义

    #nav {}
.author {}

  4. 不要把 id 或者类与元素混合使用

    #example {}
.error {}

  5. 尽量使用速记属性

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

  6. 属性值 0 后不使用单位

    margin: 0

  7. 省略前置 0

    margin: .5em

  8. 尽量使用 3 个字符的 16 进制

    color: #fff

  9. 有意义的前缀

    .mani-note {}

  10. 属性名用连字符分隔

    name-id: {}

  11. 避免使用用户代理的 css hacks

格式

  1. 字母声明顺序

    background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;

  2. 缩进块级内容

    
@media screen, projection {

html {
background: #fff;
color: #444;
}

}


3. 每条声明最后添加分号
```css
.test {
  display: block;
  height: 100px;
}

  1. 声明冒号后添加空格

    h3 {
font-weight: bold;
}

  2. 选择器和声明之间添加空格

    #video {
margin-top: 1em;
}

  3. 每个选择器单独占一行

    h1,
h2,
h3 {
font-weight: normal;
line-height: 1.2;
}

  4. 每条规则占一行，声明之间添加一个空行

    
html {
background: #fff;
}

body { margin: auto; width: 50%; }


8. 规则中使用单引号，url 中不使用引号
```css
@import url(https://www.google.com/css/maia.css);

html {
  font-family: 'open sans', arial, sans-serif;
}

基本信息

  1. 注释 
    /* header */

参考

google html/css style

soonfy