国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

切圖崽的自我修養－合理組織CSS結構

cangck_X / 2630人閱讀

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

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

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

工程師們很少說哪一條css具體用到什么技巧，但肯定知道如何將項目按照科學的組織架構好，以及如此架構的原理，優劣性與局限性. 剩下具體的工作只要交給切圖崽們去做就好

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

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

那么話說回來，一個中等復雜的web應用，到底它的css是如何組織的？

如何組織css架構

一般來說，css推薦采用

page.css ［頁面級］

common.css [網站級]

base.css ［通用級]

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

page.css ［某個特定的頁面的特定樣式］

common.css［抽象出網站通用的組件樣式］

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

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

base.css和具體UI沒有關系，它具有高度移植性，從而能夠被任何風格的網站所引用. 一般來說base.css會采取 reset + atom 這種形式

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

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

Base.css的設置就是為了解決以上的兩個問題,從而滿足重置+復用

/*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 
接下來我們來制作窗戶吧 !

地基打好了，磚瓦也有了，現在我們可以開始來制作窗戶吧. 窗戶與整個房屋的關系，相當于一個UI組件與整個網站的關系

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

這也為什么common.css是網站級的原因，不同的網站UI組件可能會差別很大，但同一個網站內部，一定遵循設計一致性原則. 所以common.css的職責就是把網站經常用到的整體樣式 [彈窗、表單、按鈕等] 抽象成UI組件進行復用

UI組件推薦根據功能劃分成更小的子塊以便能夠更好地進行管理，譬如劃分成 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 
來點定制化的東西 !

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

如果說common.css的職責就是將網站內的 高度重用的整體樣式 抽象成UI組件實現復用，那么對于網頁內的 非高度重用的樣式 我就把它們放在page.css里

/* page.css */

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

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

/* about us */
container .banner3{...}
結語

在這個sass大行其道，各種組件框架層出不窮的時代，可能本文略顯過時.更希望借鑒前人的開發經驗以及基礎，從而更好的運用到現有的框架中去.

有關模塊化css, 命名， 繼承和組合的優劣性問題，就放在下一篇文章來說

文章參考自：編寫高質量代碼－Web前端開發修煉之道

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111323.html

相關文章

  • 切圖崽的自我修養－規范CSS元素命名

    摘要：目前為止，這個命名已經可以打分，離滿分存在的差距在哪里如果一律采取駝峰命名，在從屬關系的可讀性上，稍微差了一點，來比較一下這兩個命名的可讀性和明顯采取駝峰匈牙利命名的方式可讀性更強。 前言 為什么我剛才寫的樣式亂了？！ 如何給變量，文件命名是程序員的老大難問題。命名為什么會這么難，因為它太重要了?？梢赃@么說，準確的命名可以提高代碼的可讀性，讓人容易理解，方便調試，也給以后修改和維護你的...

    mozillazg 評論0 收藏0

  • 切圖崽的自我修養－提高項目加載速度

    摘要：前言我的項目沒問題，是用戶的網絡環境不夠好前端作為一個最貼近用戶的技術工種，毫無疑問應該把戶體驗放在第一位而用戶體驗，基本正比于頁面的打開速度，特別是做移動端的同學，所以如何優化自己的項目，提高頁面的加載速度成為重中之重資源的下載及解析對前 前言 我的項目沒問題，是用戶的網絡環境不夠好 前端作為一個最貼近用戶的技術工種，毫無疑問應該把戶體驗放在第一位. 而用戶體驗，基本正比于頁面的打開...

    yanwei 評論0 收藏0

  • 切圖崽的自我修養－梳理Jquery API

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

    warnerwu 評論0 收藏0

  • 切圖崽的自我修養－梳理Jquery API

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

    JerryZou 評論0 收藏0

  • 切圖崽的自我修養－梳理Jquery API

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

    loonggg 評論0 收藏0

發表評論

0條評論

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