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

資訊專欄INFORMATION COLUMN

切圖崽的自我修養(yǎng)－合理組織CSS結(jié)構(gòu)

cangck_X / 2641人閱讀

摘要：前言不要再叫我切圖崽，我很生氣，這樣很不禮貌，請(qǐng)叫我前端工程師從方面來說，前端工程師和切圖崽的區(qū)別，并不是指寫單條技巧的高低，甚至很多工程師在一些的奇技淫巧都比不上切圖崽那切圖崽到底和工程師之間的差別是什么呢差別是年工作經(jīng)驗(yàn)視野，是格局，是

前言 
不要再叫我切圖崽，我很生氣，這樣很不禮貌，請(qǐng)叫我前！端！工！程！師！

從css方面來說，前端工程師和切圖崽的區(qū)別，并不是指寫單條css技巧的高低，甚至很多工程師在一些css的奇技淫巧都比不上切圖崽. 那切圖崽到底和工程師之間的差別是什么呢？ 差別是 N年工作經(jīng)驗(yàn) 視野，是格局，是從大方向上得出解決問題的能力

工程師們很少說哪一條css具體用到什么技巧，但肯定知道如何將項(xiàng)目按照科學(xué)的組織架構(gòu)好，以及如此架構(gòu)的原理，優(yōu)劣性與局限性. 剩下具體的工作只要交給切圖崽們?nèi)プ鼍秃?/p>

切圖崽在于他的眼界只限那一行一行特定的css. 而對(duì)整個(gè)項(xiàng)目的文件組織和代碼架構(gòu)缺乏清晰的認(rèn)識(shí). 一個(gè)網(wǎng)站，幾十個(gè)頁面，它的css文件時(shí)按照什么邏輯組織起來才不至于陷入混亂？樣式出bug如何盡快定位問題？

唉，這些問題好難，遠(yuǎn)不如無腦切圖來的輕松. 是的，世界上從來不缺無腦做事的人，但為什么你要成為他們其中之一呢? 一旦認(rèn)識(shí)到這一點(diǎn)，我們切圖崽就離高大上的工程師又進(jìn)一步了！

那么話說回來，一個(gè)中等復(fù)雜的web應(yīng)用，到底它的css是如何組織的？

如何組織css架構(gòu)

一般來說，css推薦采用

page.css ［頁面級(jí)］

common.css [網(wǎng)站級(jí)]

base.css ［通用級(jí)]

這種自下而上的組織形式.各自的功能和定義如下:

page.css ［某個(gè)特定的頁面的特定樣式］

common.css［抽象出網(wǎng)站通用的組件樣式］

base.css ［提供樣式的reset以及原子類功能］

Base.css 
如果把寫css看作建造房屋，那么base.css相當(dāng)于地基＋磚瓦

base.css和具體UI沒有關(guān)系，它具有高度移植性，從而能夠被任何風(fēng)格的網(wǎng)站所引用. 一般來說base.css會(huì)采取 reset + atom 這種形式

[ 地基 ] Reset.css用來重置與兼容瀏覽器自帶的一些 通常不是我們想要的 屬性，比如瀏覽器自帶的 padding與margin 以及 list-style

[ 磚瓦 ] Atom.css就是將 網(wǎng)站經(jīng)常用到 并且 不可再拆分的樣式 進(jìn)行復(fù)用. 試想一下,一個(gè)中等規(guī)模的網(wǎng)站 肯定不止 有20多個(gè)界面，假如每個(gè)頁面用到1次左浮動(dòng)，我們要寫20次 float:left ，這顯然違背了DRY——Don"t Repeat Yourself的編碼原則

Base.css的設(shè)置就是為了解決以上的兩個(gè)問題,從而滿足重置+復(fù)用

/*reset*/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h3,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
    margin:0;
    padding:0;
}
fieldset,img {
    border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-style:normal;
    font-weight:normal;
}
ol,ul {
    list-style:none;
}
caption,th {
    text-align:left;
}
h1,h2,h3,h4,h5,h6 {
    font-size:100%;font-weight:normal;
}
q:before,q:after {
    content:""
}
abbr,acronym {
    border:0
}




/*atom*/

/*文字*/
.f12{font-size:12px;}
.f14{font-size:14px;}
.f16{font-size:16px;}
.f20{font-size:20px;}

/*定位*/
.tl{text-align:left}
.tc{text-aligh:center}
.tr{text-aligh:right}
.fl{float:left;}
.fr{float:left;}

/*寬高*/
.w10{width:10px}
.w20{width:20px}
.w40{width:40px}
.w60{width:60px}
.w80{width:80px}
.h50{height:50px}
.h80{height:80px}
.h100{height:100px}
.h200{height:200px}

/*邊距*/
.m10{margin:10px;}
.mt10{margin-top:10px;}
.ml10{margin-right:10px;}
.p10{padding:10px;}
.pt10{padding-top:10px;}
.pl10{padding-left:10px;}
Common.css 
接下來我們來制作窗戶吧 !

地基打好了，磚瓦也有了，現(xiàn)在我們可以開始來制作窗戶吧. 窗戶與整個(gè)房屋的關(guān)系，相當(dāng)于一個(gè)UI組件與整個(gè)網(wǎng)站的關(guān)系

舉個(gè)栗子，不同的房屋之間可能用到的窗的樣式是不同的， 但針對(duì)特定一棟房屋的內(nèi)部，窗的樣式卻基本是相同的. 所以在同一棟房屋內(nèi)，我們是可以將窗戶進(jìn)行復(fù)用。即，只要刻一個(gè)模子做出第一扇窗，那么其他的門窗只要照著這個(gè)模子來復(fù)刻就好了，而用不著每次都從刻模子做起

這也為什么common.css是網(wǎng)站級(jí)的原因，不同的網(wǎng)站UI組件可能會(huì)差別很大，但同一個(gè)網(wǎng)站內(nèi)部，一定遵循設(shè)計(jì)一致性原則. 所以common.css的職責(zé)就是把網(wǎng)站經(jīng)常用到的整體樣式 [彈窗、表單、按鈕等] 抽象成UI組件進(jìn)行復(fù)用

UI組件推薦根據(jù)功能劃分成更小的子塊以便能夠更好地進(jìn)行管理，譬如劃分成 common-form.css, common-btn.css, common-pop.css等

 /* common-btn.css */

.lgBtn{...}
.mdBtn{...}
.smBtn{...}
.downloadBtn{...}

  /* common-form.css */

input[type="text"]{...}
input[type="radio"]{...}
input[type="checkbox"]{...}

 /* common-pop.css */

.msgPop{...}
.errPop{...}
.loadingPop{...}
Page.css 
來點(diǎn)定制化的東西 !

門窗都弄好了，應(yīng)該往房間里掛上一兩副裝飾畫來彰顯自己的品味修養(yǎng). 我個(gè)人比較喜歡二次元大胸萌妹子，所以當(dāng)然在臥室掛滿了AKB48的海報(bào). 但是如果把她們掛在客廳，就不太合適了. 客廳肯定只能掛［ 財(cái)源廣進(jìn) ］［ 家和萬事興 ］［ 八駿圖 ］之類的阿摔！

如果說common.css的職責(zé)就是將網(wǎng)站內(nèi)的 高度重用的整體樣式 抽象成UI組件實(shí)現(xiàn)復(fù)用，那么對(duì)于網(wǎng)頁內(nèi)的 非高度重用的樣式 我就把它們放在page.css里

/* page.css */

/* index */
container .banner1{...}

/* contact us */
container .banner2{...}

/* about us */
container .banner3{...}
結(jié)語

在這個(gè)sass大行其道，各種組件框架層出不窮的時(shí)代，可能本文略顯過時(shí).更希望借鑒前人的開發(fā)經(jīng)驗(yàn)以及基礎(chǔ)，從而更好的運(yùn)用到現(xiàn)有的框架中去.

有關(guān)模塊化css, 命名， 繼承和組合的優(yōu)劣性問題，就放在下一篇文章來說

文章參考自：編寫高質(zhì)量代碼－Web前端開發(fā)修煉之道

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

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

相關(guān)文章

  • 切圖崽的自我修養(yǎng)－規(guī)范CSS元素命名

    摘要：目前為止，這個(gè)命名已經(jīng)可以打分，離滿分存在的差距在哪里如果一律采取駝峰命名，在從屬關(guān)系的可讀性上，稍微差了一點(diǎn)，來比較一下這兩個(gè)命名的可讀性和明顯采取駝峰匈牙利命名的方式可讀性更強(qiáng)。 前言 為什么我剛才寫的樣式亂了？！ 如何給變量，文件命名是程序員的老大難問題。命名為什么會(huì)這么難，因?yàn)樗匾恕？梢赃@么說，準(zhǔn)確的命名可以提高代碼的可讀性，讓人容易理解，方便調(diào)試，也給以后修改和維護(hù)你的...

    mozillazg 評(píng)論0 收藏0

  • 切圖崽的自我修養(yǎng)－提高項(xiàng)目加載速度

    摘要：前言我的項(xiàng)目沒問題，是用戶的網(wǎng)絡(luò)環(huán)境不夠好前端作為一個(gè)最貼近用戶的技術(shù)工種，毫無疑問應(yīng)該把戶體驗(yàn)放在第一位而用戶體驗(yàn)，基本正比于頁面的打開速度，特別是做移動(dòng)端的同學(xué)，所以如何優(yōu)化自己的項(xiàng)目，提高頁面的加載速度成為重中之重資源的下載及解析對(duì)前 前言 我的項(xiàng)目沒問題，是用戶的網(wǎng)絡(luò)環(huán)境不夠好 前端作為一個(gè)最貼近用戶的技術(shù)工種，毫無疑問應(yīng)該把戶體驗(yàn)放在第一位. 而用戶體驗(yàn)，基本正比于頁面的打開...

    yanwei 評(píng)論0 收藏0

  • 切圖崽的自我修養(yǎng)－梳理Jquery API

    摘要：前言梳理一下中還不太熟悉的事件綁定統(tǒng)一用摒棄掉之前的解綁事件統(tǒng)一用語法糖，支持多個(gè)事件綁定同一個(gè)函數(shù)語法糖，支持多個(gè)事件綁定不同的函數(shù)語法糖，支持多個(gè)事件綁定不同的函數(shù)可以往里傳參可以給未創(chuàng)建的上綁定事件只能采取事件委托的形式所以寫成這樣是 前言 梳理一下Jquery中還不太熟悉的API Jquery事件綁定統(tǒng)一用on(摒棄掉之前的click,bind),解綁事件統(tǒng)一用off 語法...

    warnerwu 評(píng)論0 收藏0

  • 切圖崽的自我修養(yǎng)－梳理Jquery API

    摘要：前言梳理一下中還不太熟悉的事件綁定統(tǒng)一用摒棄掉之前的解綁事件統(tǒng)一用語法糖，支持多個(gè)事件綁定同一個(gè)函數(shù)語法糖，支持多個(gè)事件綁定不同的函數(shù)語法糖，支持多個(gè)事件綁定不同的函數(shù)可以往里傳參可以給未創(chuàng)建的上綁定事件只能采取事件委托的形式所以寫成這樣是 前言 梳理一下Jquery中還不太熟悉的API Jquery事件綁定統(tǒng)一用on(摒棄掉之前的click,bind),解綁事件統(tǒng)一用off 語法...

    JerryZou 評(píng)論0 收藏0

  • 切圖崽的自我修養(yǎng)－梳理Jquery API

    摘要：前言梳理一下中還不太熟悉的事件綁定統(tǒng)一用摒棄掉之前的解綁事件統(tǒng)一用語法糖，支持多個(gè)事件綁定同一個(gè)函數(shù)語法糖，支持多個(gè)事件綁定不同的函數(shù)語法糖，支持多個(gè)事件綁定不同的函數(shù)可以往里傳參可以給未創(chuàng)建的上綁定事件只能采取事件委托的形式所以寫成這樣是 前言 梳理一下Jquery中還不太熟悉的API Jquery事件綁定統(tǒng)一用on(摒棄掉之前的click,bind),解綁事件統(tǒng)一用off 語法...

    loonggg 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<