成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS團(tuán)隊協(xié)作規(guī)范

firim / 1856人閱讀

摘要：的命名必須是行為有語意的。前端工程師拿到視覺圖，開始寫時以手機(jī)版為第一優(yōu)先。手機(jī)開啟網(wǎng)頁很吃手機(jī)效能和網(wǎng)絡(luò)狀況，前端工程師一開始就以手機(jī)版為優(yōu)先，可以讓一開始載入，使用最少的效能快速載入網(wǎng)頁。

命名禁止縮寫

精簡扼要地對class命名，請勿使用自定義縮寫。

class name的命名必須是行為、有語意的。

禁止在非特殊情況下寫！important

CSS本身有權(quán)重設(shè)計，任意地使用!important會造成權(quán)重混亂而無法維護(hù)。

不可輕易限定寬高

用戶可以自行設(shè)定自己的瀏覽器，例如Android手機(jī)可以設(shè)定顯示字體大小，寫死的高度會讓字體相互重疊。

RWD失效

移動設(shè)備的高度是無限的，寬度是有限的。

請不要把寬寫死。

img請讓它自動縮放

請不要替img的容器設(shè)定寬或高，讓它根據(jù)設(shè)備自行縮放。

請使用bootstrap的img-responsive。

如果確實要用：

  width: 100%;
  height: auto;

如果要給img border-radius設(shè)定樣式，請使用父元素控制行為，保持img只載入圖片，沒有樣式。

優(yōu)先使用grid排版

請不要花很多時間在寫media query，設(shè)定一堆breakpoint，自己寫組件樣式，自己控制每種設(shè)備上的容器寬度。

請使用grid system，這些都是已經(jīng)成熟的框架，而且有些也已經(jīng)幫你處理了瀏覽器相容問題。

不可直接over write或在原本框架的class增加內(nèi)容

直接寫一個新的class，不要覆蓋原有的設(shè)計。

不要再已有的class上添加樣式，請額外多帶帶寫一個。

設(shè)計RWD網(wǎng)站，請遵循移動設(shè)備優(yōu)先原則

設(shè)計師的設(shè)計順序，以桌面版優(yōu)先，再設(shè)計手機(jī)版。

前端工程師拿到視覺圖，開始寫HTML/CSS時以手機(jī)版為第一優(yōu)先。

手機(jī)開啟網(wǎng)頁很吃手機(jī)效能和網(wǎng)絡(luò)狀況，前端工程師一開始就以手機(jī)版為優(yōu)先，可以讓HTML一開始載入，使用最少的效能快速載入網(wǎng)頁。當(dāng)開始制作桌面版時，只會少許跑版，做適當(dāng)微調(diào)即可。
相反，如果先制作桌面版，當(dāng)手機(jī)版畫面被切掉或是跑版，需要花更多時間去調(diào)整。
再來是iPhone手機(jī)的retina，會將圖片放到手機(jī)上時自動做兩倍縮小，在一開始制作時即可發(fā)現(xiàn)圖片載入是否吃效能。為了讓圖片能在iPhone上有更好的體驗，建議移動版優(yōu)先。
不可使用html tag selector

請直接定義class的樣式，不需要指定html tag。

層級不可以超過三層

超過三層表示耦合度太高，不具有彈性、可維護(hù)性。

用一樣的element時不要把一堆東西全部寫在里面，請把排版相關(guān)的獨立出來

把border-radius寫在img上面，請把img保持干凈。定位，例如position: absolute;

不要隨意none掉畫面上的tag或行為

請注意如果要none掉一些樣式，請依照使用程度決定。

使用程度遍布整個網(wǎng)站，請直接使用reset.css

使用程度中等以下，請定義一個class

reset.css

常見的a tag不要有underline

list消除原有樣式

請在reset.css上定義，并且設(shè)為第一載入次序

有JavaScript行為的class可以為命名加入name space 
#js-project-show {}
請勿任意使用br hr tag

br是換行，請使用在p tag里面，當(dāng)p里面文字過多時可以使用。

hr是快速劃線，但是即將被淘汰，請直接使用border寫在class里面。

br必須去思考父區(qū)塊是不是display: block;，如果要換行，應(yīng)該思考是不是下一段文字。

線條請都是用border去寫。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116398.html

相關(guān)文章

  • 優(yōu)秀文章收藏（慢慢消化）持續(xù)更新~

    摘要：整理收藏一些優(yōu)秀的文章及大佬博客留著慢慢學(xué)習(xí)原文協(xié)作規(guī)范中文技術(shù)文檔協(xié)作規(guī)范阮一峰編程風(fēng)格凹凸實驗室前端代碼規(guī)范風(fēng)格指南這一次，徹底弄懂執(zhí)行機(jī)制一次弄懂徹底解決此類面試問題瀏覽器與的事件循環(huán)有何區(qū)別筆試題事件循環(huán)機(jī)制異步編程理解的異步 better-learning 整理收藏一些優(yōu)秀的文章及大佬博客留著慢慢學(xué)習(xí) 原文:https://www.ahwgs.cn/youxiuwenzhan...

    JeOam 評論0 收藏0

  • Web前端開發(fā)規(guī)范手冊

    摘要：規(guī)范目的為提高團(tuán)隊協(xié)作效率便于后臺人員添加功能及前端后期優(yōu)化維護(hù)輸出高質(zhì)量的文檔特制訂此文檔。 規(guī)范目的 為提高團(tuán)隊協(xié)作效率, 便于后臺人員添加功能及前端后期優(yōu)化維護(hù), 輸出高質(zhì)量的文檔, 特制訂此文檔。 文件規(guī)范 文件命名規(guī)則 文件名稱統(tǒng)一用小寫的英文字母、數(shù)字和下劃線的組合，其中不得包含漢字、空格和特殊字符；命名原則的指導(dǎo)思想一是使得你自己和工作組的每一個成員能夠方便的理解每一個...

    wua_wua2012 評論0 收藏0

  • Web前端開發(fā)規(guī)范手冊

    摘要：規(guī)范目的為提高團(tuán)隊協(xié)作效率便于后臺人員添加功能及前端后期優(yōu)化維護(hù)輸出高質(zhì)量的文檔特制訂此文檔。 規(guī)范目的 為提高團(tuán)隊協(xié)作效率, 便于后臺人員添加功能及前端后期優(yōu)化維護(hù), 輸出高質(zhì)量的文檔, 特制訂此文檔。 文件規(guī)范 文件命名規(guī)則 文件名稱統(tǒng)一用小寫的英文字母、數(shù)字和下劃線的組合，其中不得包含漢字、空格和特殊字符；命名原則的指導(dǎo)思想一是使得你自己和工作組的每一個成員能夠方便的理解每一個...

    Tamic 評論0 收藏0

  • Web前端開發(fā)規(guī)范手冊

    摘要：規(guī)范目的為提高團(tuán)隊協(xié)作效率便于后臺人員添加功能及前端后期優(yōu)化維護(hù)輸出高質(zhì)量的文檔特制訂此文檔。 規(guī)范目的 為提高團(tuán)隊協(xié)作效率, 便于后臺人員添加功能及前端后期優(yōu)化維護(hù), 輸出高質(zhì)量的文檔, 特制訂此文檔。 文件規(guī)范 文件命名規(guī)則 文件名稱統(tǒng)一用小寫的英文字母、數(shù)字和下劃線的組合，其中不得包含漢字、空格和特殊字符；命名原則的指導(dǎo)思想一是使得你自己和工作組的每一個成員能夠方便的理解每一個...

    xiaotianyi 評論0 收藏0

  • 開發(fā)規(guī)范（三）CSS規(guī)范

    摘要：規(guī)范目前沿用規(guī)范，閱讀本規(guī)范前請熟讀規(guī)范補(bǔ)充規(guī)范閱讀編碼規(guī)范補(bǔ)充規(guī)范是指在規(guī)范上擴(kuò)展的規(guī)范，部分示例中有不符合規(guī)范的，以規(guī)范為準(zhǔn)。請熟讀以上規(guī)范條例，在工作中嚴(yán)格遵守。 概述 為提高團(tuán)隊協(xié)作效率，規(guī)范文件管理，方便項目后期維護(hù)，提高代碼質(zhì)量，特制訂此文檔，前端開發(fā)人員必須遵照本規(guī)范進(jìn)行前臺頁面開發(fā)。 CSS規(guī)范 目前沿用NEC規(guī)范，閱讀本規(guī)范前請熟讀 NEC規(guī)范 補(bǔ)充規(guī)范 閱讀 CSS...

    cod7ce 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<