資訊專欄INFORMATION COLUMN
摘要：的命名必須是行為有語意的。前端工程師拿到視覺圖，開始寫時以手機版為第一優先。手機開啟網頁很吃手機效能和網絡狀況，前端工程師一開始就以手機版為優先，可以讓一開始載入，使用最少的效能快速載入網頁。
命名禁止縮寫
精簡扼要地對class命名，請勿使用自定義縮寫。
class name的命名必須是行為、有語意的。
禁止在非特殊情況下寫！importantCSS本身有權重設計，任意地使用!important會造成權重混亂而無法維護。
不可輕易限定寬高用戶可以自行設定自己的瀏覽器，例如Android手機可以設定顯示字體大小，寫死的高度會讓字體相互重疊。
RWD失效移動設備的高度是無限的，寬度是有限的。
請不要把寬寫死。
img請讓它自動縮放請不要替img的容器設定寬或高，讓它根據設備自行縮放。
請使用bootstrap的img-responsive。
如果確實要用：
width: 100%; height: auto;
如果要給img border-radius設定樣式，請使用父元素控制行為，保持img只載入圖片，沒有樣式。
優先使用grid排版請不要花很多時間在寫media query，設定一堆breakpoint，自己寫組件樣式，自己控制每種設備上的容器寬度。
請使用grid system，這些都是已經成熟的框架，而且有些也已經幫你處理了瀏覽器相容問題。
不可直接over write或在原本框架的class增加內容直接寫一個新的class，不要覆蓋原有的設計。
不要再已有的class上添加樣式，請額外多帶帶寫一個。
設計RWD網站，請遵循移動設備優先原則設計師的設計順序，以桌面版優先，再設計手機版。
前端工程師拿到視覺圖，開始寫HTML/CSS時以手機版為第一優先。
手機開啟網頁很吃手機效能和網絡狀況，前端工程師一開始就以手機版為優先，可以讓HTML一開始載入，使用最少的效能快速載入網頁。當開始制作桌面版時，只會少許跑版，做適當微調即可。不可使用html tag selector
相反，如果先制作桌面版，當手機版畫面被切掉或是跑版，需要花更多時間去調整。再來是iPhone手機的retina，會將圖片放到手機上時自動做兩倍縮小，在一開始制作時即可發現圖片載入是否吃效能。為了讓圖片能在iPhone上有更好的體驗，建議移動版優先。
請直接定義class的樣式，不需要指定html tag。
層級不可以超過三層超過三層表示耦合度太高，不具有彈性、可維護性。
用一樣的element時不要把一堆東西全部寫在里面，請把排版相關的獨立出來把border-radius寫在img上面，請把img保持干凈。定位，例如position: absolute;
不要隨意none掉畫面上的tag或行為請注意如果要none掉一些樣式，請依照使用程度決定。
使用程度遍布整個網站，請直接使用reset.css
使用程度中等以下，請定義一個class
reset.css常見的a tag不要有underline
list消除原有樣式
請在reset.css上定義，并且設為第一載入次序
有JavaScript行為的class可以為命名加入name space#js-project-show {}
請勿任意使用br hr tag
br是換行，請使用在p tag里面，當p里面文字過多時可以使用。
hr是快速劃線，但是即將被淘汰，請直接使用border寫在class里面。
br必須去思考父區塊是不是display: block;，如果要換行，應該思考是不是下一段文字。
線條請都是用border去寫。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116398.html
摘要：整理收藏一些優秀的文章及大佬博客留著慢慢學習原文協作規范中文技術文檔協作規范阮一峰編程風格凹凸實驗室前端代碼規范風格指南這一次，徹底弄懂執行機制一次弄懂徹底解決此類面試問題瀏覽器與的事件循環有何區別筆試題事件循環機制異步編程理解的異步 better-learning 整理收藏一些優秀的文章及大佬博客留著慢慢學習 原文:https://www.ahwgs.cn/youxiuwenzhan...
摘要：規范目的為提高團隊協作效率便于后臺人員添加功能及前端后期優化維護輸出高質量的文檔特制訂此文檔。 規范目的 為提高團隊協作效率, 便于后臺人員添加功能及前端后期優化維護, 輸出高質量的文檔, 特制訂此文檔。 文件規范 文件命名規則 文件名稱統一用小寫的英文字母、數字和下劃線的組合，其中不得包含漢字、空格和特殊字符；命名原則的指導思想一是使得你自己和工作組的每一個成員能夠方便的理解每一個...
摘要：規范目的為提高團隊協作效率便于后臺人員添加功能及前端后期優化維護輸出高質量的文檔特制訂此文檔。 規范目的 為提高團隊協作效率, 便于后臺人員添加功能及前端后期優化維護, 輸出高質量的文檔, 特制訂此文檔。 文件規范 文件命名規則 文件名稱統一用小寫的英文字母、數字和下劃線的組合，其中不得包含漢字、空格和特殊字符；命名原則的指導思想一是使得你自己和工作組的每一個成員能夠方便的理解每一個...
摘要：規范目的為提高團隊協作效率便于后臺人員添加功能及前端后期優化維護輸出高質量的文檔特制訂此文檔。 規范目的 為提高團隊協作效率, 便于后臺人員添加功能及前端后期優化維護, 輸出高質量的文檔, 特制訂此文檔。 文件規范 文件命名規則 文件名稱統一用小寫的英文字母、數字和下劃線的組合，其中不得包含漢字、空格和特殊字符；命名原則的指導思想一是使得你自己和工作組的每一個成員能夠方便的理解每一個...
摘要：規范目前沿用規范，閱讀本規范前請熟讀規范補充規范閱讀編碼規范補充規范是指在規范上擴展的規范，部分示例中有不符合規范的，以規范為準。請熟讀以上規范條例，在工作中嚴格遵守。 概述 為提高團隊協作效率，規范文件管理，方便項目后期維護，提高代碼質量，特制訂此文檔，前端開發人員必須遵照本規范進行前臺頁面開發。 CSS規范 目前沿用NEC規范，閱讀本規范前請熟讀 NEC規范 補充規范 閱讀 CSS...
閱讀 2112·2023-04-26 00:41
閱讀 1142·2021-09-24 10:34
閱讀 3573·2021-09-23 11:21
閱讀 4030·2021-09-22 15:06
閱讀 1557·2019-08-30 15:55
閱讀 897·2019-08-30 15:54
閱讀 1829·2019-08-30 15:48
閱讀 549·2019-08-29 13:58
