給前端新手總結的33個需要注意的小細節技巧，弄清楚你就入門了

web前端開發如今是火了，火的發燙，但是相關知識點確像N座大山一樣，聳立在我們面前，連綿起伏，那麼這些山頭我們是佔領還是繞開呢？很多人就懵了，這不光是初學者，很多學了幾年了的人也會有些迷茫，今天這篇文章就是為新手準備的，33個小技巧，希望大家能學到自己想要的知識。

下面就來講要注意的33點。

1.不要在自閉合的元素尾部添加斜線（h5規範）。

2.為每一個html頁面的第一行添加標準模式。

3.為根元素制定lang屬性,為文檔設置正確的語言

4.IE兼容模式，通過標籤來確定當前頁面所採用的ie版本，最好設置為edge mode

5.標籤聲明文檔字元編碼

6.盡量使用最少的標籤並保持最小的複雜度

7.布爾型屬性可以在聲明中不賦值

8.為了代碼的易讀性，每個聲明塊的左花括弧前添加一個空格，右花括弧應該單獨一行

9.每條聲明語句後面應加一個空格

10.對於逗號分隔的屬性，每個逗號後面都應該插入一個空格

11.十六進位值應該全部小寫，並且盡量使用簡寫形式的十六進位值

12.為選擇器的屬性添加雙引號，實例：input[tyep="text"]

13.使用@media進行瀏覽器響應式設計

14.css兼容瀏覽器的前綴：-ms- IE, -moz- Firefox, -webkit- Safari Chrome ,-o- Opera

15.class名稱中只能出現小寫字元和破折號1

6.基於最近的父class或基本class作為新class的前綴

17.選擇帶有語義的合適的標籤

18.表單的正確寫法：<form><fieldset><legend></legend><p><label></label><input></p></fieldset></form>表單域通過fieldset標籤包起來，並用legend標籤說明表單的用途。

19.表格的正確寫法：<table><caption></caption><thead></thead><tbody></tbody><tfoot></tfoot></table>

20.標籤語義化，盡量少用無語義標籤div和span，既可以用p也可以用div的地方盡量用p

21.組織CSS的方法：base（精簡通用、原子類）、common（模塊化、封裝）、page（根據頁面配上註釋、分塊編寫、易於維護、通過命名規則避免衝突）

22.在編寫float屬性時，應該將display：inline加入，可以避免由於浮動引入的bug

23.將塊元素居中時，應該設定元素的寬度。

24.css樣式命名：駱駝命名法用於區別不同單詞，劃線用於表明從屬關係。

25.多個人合作寫css時，規定命名前綴用於避免樣式衝突。（如：小明：xm_ 小花：xh_）

26.通過css spirit技術解決圖片載入問題（只能合併用於背景的圖片）

27.推薦使用一行式的編碼風格

28.進行css樣式設計的時候盡量使用class，少用id

29.通過css hack技術 選擇前綴法、樣式前綴法解決瀏覽器兼容性問題。IE條件註釋解決ie瀏覽器問題

30.行內元素的padding-top padding-bottom margin-top margin-bottom不會產生效果

31.優秀的代碼可維護性：代碼的松耦合、高內聚，將頁面的元素視為一個個模塊，相互獨立；良好的註釋；注意代碼的彈性，在性能和彈性的選擇上，一般以彈性為優先考慮對象；嚴格按照規範編寫代碼。

32.命名規則：公共組件因為高度重用，命名從簡，不加前綴；各欄目的相應代碼，需加前綴，前綴為工程師姓名拼音的首字母；模塊組件化，組件中的class或id採用駱駝命名法和下劃線相結合的方式，單詞之間的分隔靠大寫字母分開，從屬關係靠下劃線分隔；命名清晰，不怕命名長，就怕命名衝突；命名要有意義，盡量使用英文命名，不要使用拼音。

33.註釋規則：文件徒步加上註釋說明：文件用途、作者姓名、聯繫方式、製作日期；模塊註釋方法：代碼用途；小註釋：代碼說明（一行）

我的前端群：593757064，都是前端黨，群里不定期分享乾貨。想學到東西的都可以來，小編我歡迎大家。