无码人妻视频一区二区三区,亚洲国产精品色一区二区三区色牛,亚洲国产中文精品碰碰,九九视频这里只有精品

1915瀏覽量

CSS架構(gòu)

來源: 時(shí)間:2012-12-10

Philip Walton 在AppFolio擔(dān)任前端工程師,他在Santa Barbara on Rails的聚會(huì)上提出了CSS架構(gòu)和一些最佳實(shí)踐,并且在工作中一直沿用。

擅長(zhǎng)CSS的Web開發(fā)人員不僅可以從視覺上復(fù)制實(shí)物原型,還可以用代碼進(jìn)行完美的呈現(xiàn)。無需使用表格、盡可能少的使用圖片。如果你是個(gè)名副其實(shí)的高手,你可以快速把最新和最偉大的技術(shù)應(yīng)用到你的項(xiàng)目中,比如媒體查詢、過渡、濾鏡、轉(zhuǎn)換等。雖然這些都是一個(gè)真正的CSS高手所具備的,但CSS很少被人單獨(dú)拿出來討論,或者用它去評(píng)估某個(gè)人的技能。

有趣的是,我們很少這樣去評(píng)價(jià)其他語(yǔ)言。Rails開發(fā)人員并不會(huì)因?yàn)槠浯a比較規(guī)范,就認(rèn)為他是一名優(yōu)秀的開發(fā)人員。這僅僅是個(gè)基準(zhǔn)。當(dāng)然,他的代碼得必須規(guī)范。另外,還需集合其他方面考慮,比如代碼是否可讀?是否容易修改或擴(kuò)展……

這都是些很自然的問題,CSS和它們并沒有什么不同之處。今天的Web應(yīng)用程序要比以往更加龐大。一個(gè)缺乏深思熟慮的CSS架構(gòu)往往會(huì)削弱發(fā)展,是時(shí)候像評(píng)估其他語(yǔ)言那樣,來評(píng)估一下CSS架構(gòu)了,這些都不應(yīng)該放在“事后”考慮或者單單屬于設(shè)計(jì)師們的事情。

1.良好的CSS架構(gòu)目標(biāo)

在CSS社區(qū),很難提出某個(gè)最佳實(shí)踐已經(jīng)成為大家的普遍共識(shí)。純粹地從Hacker News的評(píng)論上判斷和開發(fā)者們對(duì)CSS Lint發(fā)布后的反應(yīng)來看,大多數(shù)人對(duì)基本的CSS東西是持反對(duì)意見的。所以,并不是為自己的最佳實(shí)踐奠定一套基本的論據(jù),而應(yīng)該確定真正的目標(biāo)。

好的CSS架構(gòu)目標(biāo)并不同于開發(fā)一個(gè)好的應(yīng)用程序,它必須是可預(yù)測(cè)、可重用、可維護(hù)和可伸縮的。

可預(yù)測(cè)

可預(yù)測(cè)意味著可以像預(yù)期的那樣規(guī)范自己的行為。當(dāng)你添加或者修改某個(gè)規(guī)則時(shí),它并不會(huì)影響到?jīng)]有指定的部分。對(duì)于一個(gè)小網(wǎng)站來說,一些微乎其微的改變并不算什么。而對(duì)于擁有成千上萬(wàn)個(gè)頁(yè)面的大網(wǎng)站來說,可預(yù)測(cè)卻是必須的。

可重用

CSS規(guī)則應(yīng)具備抽象和解耦性,這樣你就可以在現(xiàn)有的基礎(chǔ)上快速構(gòu)建新的組件,無需重新修改編碼模式。

可維護(hù)

當(dāng)把新組件放置到網(wǎng)站上,并且執(zhí)行添加、修改或者重新設(shè)計(jì)操作時(shí),無需重構(gòu)現(xiàn)有CSS,并且新添加的X并不會(huì)打破原有頁(yè)面的Y組件。

可擴(kuò)展

當(dāng)網(wǎng)站發(fā)展到一定規(guī)模后,都需要進(jìn)行維護(hù)和擴(kuò)展??蓴U(kuò)展的CSS意味著網(wǎng)站的CSS架構(gòu)可以由個(gè)人或者團(tuán)隊(duì)輕易地管理,無需花費(fèi)太多的學(xué)習(xí)成本。

2.常見的錯(cuò)誤實(shí)踐

在實(shí)現(xiàn)良好的CSS架構(gòu)目標(biāo)之前,我們來看一些常見的錯(cuò)誤做法,這對(duì)我們達(dá)成目標(biāo)是有好處的。

下面的這些例子雖然都可以很好的執(zhí)行,但卻會(huì)給你帶來很多煩惱,盡管我們的意圖和愿望都是美好的,但是這些開發(fā)模式會(huì)讓你頭疼。

幾乎在每個(gè)網(wǎng)站上,都會(huì)有一個(gè)特定的虛擬元素看起來與其他頁(yè)面是完全一樣的,然而只有一個(gè)頁(yè)面除外。當(dāng)面對(duì)這樣一種情況時(shí),幾乎每個(gè)新手CSS開發(fā)人員(甚至是經(jīng)驗(yàn)豐富的)都會(huì)以同樣的方式來修改。你應(yīng)該為該頁(yè)面找出些與眾不同之處(或者自己創(chuàng)建),然后再寫一個(gè)新規(guī)則去操作。

基于父組件來修改組件

.widget {

background: yellow;

border: 1px solid black;

color: black;

width: 50%;

}

#sidebar .widget {

width: 200px;

}

body.homepage .widget {

background: white;

}

初看,這絕對(duì)是段無害的代碼,但讓我們來看看它是否達(dá)到了我們所設(shè)置的目標(biāo)。

首先,widget在examle是不可預(yù)見的。當(dāng)這些小部件出現(xiàn)在頁(yè)面兩側(cè)或者主頁(yè)面時(shí),開發(fā)人員期望它們以某種特定的方式顯示出來,且又不失特色。另外,它也是不可重用或不可擴(kuò)展的。

另外,它也比較難維護(hù)。一旦這個(gè)widget需要重新設(shè)計(jì),那么你不得不修改其他幾個(gè)CSS樣式。想象一下,如果這段代碼是使用其他語(yǔ)言編寫的,它基本就是一個(gè)類定義,然后在代碼的另一部分使用該類定義并做出擴(kuò)展。這直接違反了軟件開發(fā)的開放/閉合(open/close)原則。

過于復(fù)雜的選擇器

偶爾,會(huì)有些文章介紹CSS選擇器對(duì)整個(gè)網(wǎng)站的展示起著非常重要的作用,并且宣稱無需使用任何類選擇器或者ID選擇器。

但伴隨著越深入的開發(fā),我越會(huì)遠(yuǎn)離這種復(fù)雜的選擇器。一個(gè)選擇器越復(fù)雜,與HTML就越耦合。依靠HTML標(biāo)簽和組合器可以保持HTML代碼干干凈凈,但卻讓CSS更加毛重和凌亂。

#main-nav ul li ul li div { }

#content article h1:first-child { }

#sidebar > div > h3 + p { }

對(duì)上面代碼進(jìn)行簡(jiǎn)單的理解。第一個(gè)可能是對(duì)下拉菜單進(jìn)行樣式化;第二個(gè)想說明文章的主標(biāo)題應(yīng)該與其他頁(yè)面的H1元素不同;最后一個(gè)表示在第一段的側(cè)邊欄區(qū)域添加一些額外的空間。

如果這個(gè)HTML是永遠(yuǎn)不變的,那就無可說之處,但這根本毫不現(xiàn)實(shí)。過于復(fù)雜的選擇器會(huì)讓人印象深刻,它可以讓HTML擺脫掉表面上的復(fù)雜,但對(duì)于實(shí)現(xiàn)良好的CSS架構(gòu)目標(biāo)卻毫無用處。

上面提到的例子都是不具備可預(yù)測(cè)性、可重用、可擴(kuò)展和可維護(hù)這四大特性的。例如第一個(gè)選擇器(下來菜單)例子,如果一個(gè)外觀非常相似的下拉列表需要用在不同的頁(yè)面上,并且#main-nav并不屬于內(nèi)部元素,那么你是否需要重新設(shè)計(jì)?假設(shè)開發(fā)者想要修改第三個(gè)例子里div里面部分標(biāo)記,那么整個(gè)規(guī)則都會(huì)被打破。

過于通用的類名

當(dāng)創(chuàng)建可重用的設(shè)計(jì)組件時(shí),在組件的類選擇器中覆蓋附件的子元素是很常見的現(xiàn)象。例如:

。..

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

In condimentum justo et est dapibus sit amet euismod ligula ornare.

Vivamus elementum accumsan dignissim.

.widget {}

.widget .title {}

.widget .contents {}

.widget .action {}

像.title、.contents、.action這些子元素類選擇器可以被安全地進(jìn)行樣式命名,無需擔(dān)心這些樣式會(huì)蔓延到擁有相同類名的其他元素中。這是千真萬(wàn)確的。但它并沒有阻止相同樣式類名稱會(huì)蔓延到這個(gè)組件上。

在一些大型項(xiàng)目上,像.title這樣的名稱很有可能會(huì)被用在另外一個(gè)頁(yè)面或者本身。如果這樣的情況發(fā)生,那么整個(gè)標(biāo)題部分明顯會(huì)和預(yù)期的不一樣。

過于通用的類選擇器名稱會(huì)導(dǎo)致許多不可預(yù)測(cè)的CSS樣式發(fā)生。

聯(lián)系我們

一次需求提交或許正是成就一個(gè)出色產(chǎn)品的開始。
歡迎填寫表格或發(fā)送合作郵件至: qczsky@126.com

大理青橙科技

電話:13988578755 13988578755

郵箱:qczsky@126.com

地址:大理市下關(guān)龍都春天10層

如果您無法識(shí)別驗(yàn)證碼,請(qǐng)點(diǎn)圖片更換

无为县| 永平县| 三原县| 南郑县| 迁西县| 内丘县| 忻州市| 仁布县| 佛山市| 东阿县| 鸡泽县| 株洲县| 黄大仙区| 清原| 蚌埠市| 惠东县| 西和县| 中山市| 清丰县| 迭部县| 沙河市| 宽甸| 高陵县| 鄯善县| 新竹县| 玉田县| 芒康县| 大姚县| 汉川市| 唐河县| 县级市| 陆丰市| 曲阳县| 舞阳县| 宁河县| 丹阳市| 丹阳市| 琼海市| 和林格尔县| 昆山市| 德阳市|