前端規範

時間 2019-11-09

標籤前端規範简体版

原文原文鏈接

參考資料：

https://github.com/ecomfe/spec（百度）

經過分析github代碼庫總結出來的工程師代碼書寫習慣

NEC更好的解決方案（網易）

說明：

紅字爲重要，黃字爲不肯定或不會，參1～n爲參考的資料連接

　　原本整理在印象筆記，無序列表在博客園編輯器顯示不正常，望諒解 (已修正^_^)

　　轉載請註明出處，建議請留言謝謝。 http://www.cnblogs.com/liu-zhen/p/4340190.html

系列文章

前端規範1-HTML規範

　 前端規範2-CSS規範

　　HTML嵌套規則

敬請期待

　　HTML閉合標籤

　　HTML與CSS屬性書寫順序

　　更好的利用title與alt屬性

　　如何正確的使用HTML標題

總的原則

實用高於完美

儘可能遵循 HTML 標準和語義，可是不該該以浪費實用性做爲代價。

任什麼時候候都要用盡可能小的複雜度和儘可能少的標籤來解決問題。

重要內容的代碼儘可能靠前，利於SEO

dome結構

dome
1. index.html(靜態頁面)
2. styles
  1. reset.css
  2. style
3. scripts
  1. jquery-1.8.2.min.js
  2. script.js
4. images
  1. bg

DOME（百度雲下載：http://pan.baidu.com/s/1hqAaST2）css

index.htmlhtml

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta charset="UTF-8"/>
 5     <title>標題</title>
 6     <meta name="keywords" content=""/>
 7     <meta name="description" content=""/>
 8 
 9     <link rel="stylesheet" href="styles/reset.css"/>
10     <link rel="shortcut icon" href="images/bg/favicon.ico"/>
11 
12     <link rel="stylesheet" href="style/style.css">
13     <script src="./scripts/jquery-1.8.2.min.js"></script>
14     <script src="./scripts/script.js"></script>
15 </head>
16 <body>
17     
18 </body>
19 </html>

reset.css

 1 /* reset */
 2 html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
 3 header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
 4 table{border-collapse:collapse;border-spacing:0;}
 5 caption,th{text-align:left;font-weight:normal;}
 6 html,body,fieldset,img,iframe,abbr{border:0;}
 7 i,cite,em,var,address,dfn{font-style:normal;}
 8 [hidefocus],summary{outline:0;}
 9 li{list-style:none;}
10 h1,h2,h3,h4,h5,h6,small{font-size:100%;}
11 sup,sub{font-size:83%;}
12 pre,code,kbd,samp{font-family:inherit;}
13 q:before,q:after{content:none;}
14 textarea{overflow:auto;resize:none;}
15 label,summary{cursor:default;}
16 a,button{cursor:pointer;}
17 h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
18 del,ins,u,s,a,a:hover{text-decoration:none;}
19 body,textarea,input,button,select,keygen,legend{font:12px/1.14 arial,\5b8b\4f53;color:#333;outline:0;}
20 body{background:#fff;}
21 /*a,a:hover{color:#333;}*/
22 /* /reset */
23 
24 /* 通用樣式 */
25 
26 /* /通用樣式 */

script.js

1 window.onload=function(){
2 
3 }
4 $(function(){
5     
6 })

文件夾命名

方案一（適合通常項目）：

項目名
- index.html(靜態頁面)
- styles
  - reset.css
- scripts
  - jquery.js
- images
  - bg
    - bg1.png
  - img1.jpg

方案二（適合較小項目）：

項目名
- index.html(靜態頁面)
- img
  - reset.css
  - music.mp3
  - jquery.js
- images
  - bg
    - bg1.png
  - img1.jpg

備：若是由多個單詞組成，使用-鏈接符鏈接

上面bg即爲背景圖，包括各類logo，按鈕背景，CSS Sprite等等

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。