2023-08-24 分類: 網(wǎng)站建設
百度權(quán)重查詢 站長交易 友情鏈接交換 網(wǎng)站監(jiān)控 服務器監(jiān)控 seo監(jiān)控
Philip Walton 在AppFolio擔任前端工程師,他在Santa Barbara on Rails的聚會上提出了CSS架構(gòu)和一些好佳實踐,并且在工作中一向沿用。
擅長CSS的Web開發(fā)人員不僅可以從視覺上復制實物原型,還可以用代碼進行好的呈現(xiàn)。無需使用表格、盡可能少的使用圖片。假如你是個名副其實的高手,你可以快速把好新和好偉大的技術(shù)應用到你的項目中,比如媒體查詢、過渡、濾鏡、轉(zhuǎn)換等。雖然這些都是一個真正的CSS高手所具備的,但CSS很少被人單獨拿出來討論,或者用它去評估某個人的技能。
有趣的是,我們很少這樣去評價其他語言。Rails開發(fā)人員并不會因為其代碼比較規(guī)范,就認為他是一名優(yōu)異的開發(fā)人員。這僅僅是個基準。當然,他的代碼得必須規(guī)范。另外,還需薈萃其他方面考慮,比如代碼是否可讀?是否容易修改或擴展……
這都是些很天然的問題,CSS和它們并沒有什么不同之處。今天的Web應用程序要比以往更加重大。一個缺乏深思熟慮的CSS架構(gòu)往往會削弱發(fā)展,是時候像評估其他語言那樣,來評估一下CSS架構(gòu)了,這些都不應該放在“事后”考慮或者單單屬于設計師們的事情。
1.的CSS架構(gòu)目標
在CSS社區(qū),很難提出某個好佳實踐已經(jīng)成為大家的普遍共識。純粹地從Hacker News的評論上判斷和開發(fā)者們對CSS Lint發(fā)布后的反應來看,大多數(shù)人對基本的CSS東西是持反對意見的。所以,并不是為自己的好佳實踐奠定一套基本的論據(jù),而應該確定真正的目標。
好的CSS架構(gòu)目標并不同于開發(fā)一個好的應用程序,它必須是可展望、可重用、可維護和可伸縮的。
可展望
可展望意味著可以像預期的那樣規(guī)范自己的行為。當你添加或者修改某個規(guī)則時,它并不會影響到?jīng)]有指定的部分。對于一個小網(wǎng)站來說,一些微乎其微的改變并不算什么。而對于擁有成千上萬個頁面的大網(wǎng)站來說,可展望卻是必須的。
可重用
CSS規(guī)則應具備抽象息爭耦性,這樣你就可以在現(xiàn)有的基礎上快速構(gòu)建新的組件,無需重新修改編碼模式。
可維護
當把新組件放置到網(wǎng)站上,并且執(zhí)行添加、修改或者重新設計操作時,無需重構(gòu)現(xiàn)有CSS,并且新添加的X并不會打破原有頁面的Y組件。
可擴展
當網(wǎng)站發(fā)展到一定規(guī)模后,都需要進行維護和擴展??蓴U展的CSS意味著網(wǎng)站的CSS架構(gòu)可以由個人或者團隊輕易地管理,無需花費太多的學習成本。
2.常見的錯誤實踐
在實現(xiàn)的CSS架構(gòu)目標之前,我們來看一些常見的錯誤做法,這對我們達成目標是有益處的。
下面的這些例子雖然都可以很好的執(zhí)行,但卻會給你帶來許多煩惱,盡管我們的意圖和愿望都是美好的,但是這些開發(fā)模式會讓你頭疼。
幾乎在每個網(wǎng)站上,都會有一個特定的虛擬元素看起來與其他頁面是完全一樣的,然而只有一個頁面除外。當面對這樣一種情況時,幾乎每個新手CSS開發(fā)人員(甚至是經(jīng)驗雄厚的)都會以同樣的體例來修改。你應該為該頁面找出些與眾不同之處(或者自己創(chuàng)建),然后再寫一個新規(guī)則去操作。
基于父組件來修改組件
.widget {
background: yellow;
border: 1px solid black;
color: black;
width: 50%;
}
#sidebar .widget {
width: 200px;
}
body.homepage .widget {
background: white;
}
初看,這是段無害的代碼,但讓我們來看看它是否達到了我們所設置的目標。
首先,widget在examle是不可預見的。當這些小部件出現(xiàn)在頁面兩側(cè)或者主頁面時,開發(fā)人員期望它們以某種特定的體例顯示出來,且又不失特色。另外,它也是不可重用或不可擴展的。
另外,它也比較難維護。一旦這個widget需要重新設計,那么你不得不修改其他幾個CSS樣式。想象一下,假如這段代碼是使用其他語言編寫的,它基本就是一個類定義,然后在代碼的另一部分使用該類定義并做出擴展。這直接違反了軟件開發(fā)的開放/閉合(open/close)原則。
過于復雜的選擇器
偶爾,會有些文章介紹CSS選擇器對整個網(wǎng)站的展示起著特別很是主要的作用,并且宣稱無需使用任何類選擇器或者ID選擇器。
但伴隨著越深入的開發(fā),我越會遠離這種復雜的選擇器。一個選擇器越復雜,與HTML就越耦合。依靠HTML標簽和組合器可以保持HTML代碼干干凈凈,但卻讓CSS更加毛重和凌亂。
#main-nav ul li ul li div { }
#content article h1:first-child { }
#sidebar > div > h3 + p { }
對上面代碼進行簡單的理解。個可能是對下拉菜單進行樣式化;第二個想說明文章的主題目應該與其他頁面的H1元素不同;好后一個透露表現(xiàn)在段的側(cè)邊欄區(qū)域添加一些額外的空間。
假如這個HTML是永遠不變的,那就無可說之處,但這根本毫不現(xiàn)實。過于復雜的選擇器會讓人印象深刻,它可以讓HTML脫節(jié)掉外觀上的復雜,但對于實現(xiàn)的CSS架構(gòu)目標卻毫無用處。
上面提到的例子都是不具備可展望性、可重用、可擴展和可維護這四大特征的。例如個選擇器(下來菜單)例子,假如一個外觀特別很是相似的下拉列表需要用在不同的頁面上,并且#main-nav并不屬于內(nèi)部元素,那么你是否需要重新設計?假設開發(fā)者想要修改第三個例子里div里面部分標記,那么整個規(guī)則都會被打破。
過于通用的類名
當創(chuàng)建可重用的設計組件時,在組件的類選擇器中覆蓋附件的子元素是很常見的現(xiàn)象。例如:
<div class=“widget”>
<h3 class=“title”>。..</h3>
<div class=“contents”>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
In condimentum justo et est dapibus sit amet euismod ligula ornare.
Vivamus elementum accumsan dignissim.
<button class=“action”>Click Me!</button>
</div>
</div>
.widget {}
.widget .title {}
.widget .contents {}
.widget .action {}
像.title、.contents、.action這些子元素類選擇器可以被安全地進行樣式命名,無需憂慮這些樣式會蔓延到擁有相同類名的其他元素中。這是千真萬確的。但它并沒有阻止相同樣式類名稱會蔓延到這個組件上。
在一些大型項目上,像.title這樣的名稱很有可能會被用在另外一個頁面或者自己。假如這樣的情況發(fā)生,那么整個題目部分顯明會和預期的不一樣。
過于通用的類選擇器名稱會導致許多不可展望的CSS樣式發(fā)生。
一個規(guī)則做太多事
有時,你要在網(wǎng)站的左上角區(qū)域做一個20pixels的可視化組件。
.widget {
position: absolute;
top: 20px;
left: 20px;
background-color: red;
font-size: 1.5em;
text-transform: uppercase;
}
下面,你需要在網(wǎng)站的其他區(qū)域使用該組件,那么上面的這個代碼顯明是錯誤的,不可重用的。
問題的關(guān)鍵是你讓.widget這個選擇器做的事情太多,不僅對該組件的位置進行了規(guī)定,還對它的外觀和感覺方面進行了樣式。外觀和感覺可以通用,而位置是不可以的。有時候,把它們整合起來使用反而會大打折扣。
雖然這些看起來并無害處,對一些缺乏經(jīng)驗的CSS程序員來說,復制和粘貼已經(jīng)成為一種習慣。假如一個新團隊需要一個特定組件,比如.infobox,他們會嘗試使用這個類選擇器。但假如該信息框沒有按照期望的那樣,在每個需要的地方準確顯示出來。這時,你認為他們會怎么做?以我的經(jīng)驗來看,他們會打破可重用這一規(guī)則,相反,他們會簡單地把這些代碼復制粘貼到每個需要的地方。做些不需要的重復工作。
3.原因
上面列舉的這些常規(guī)錯誤實踐都有一個相似性,CSS樣式承擔過多。
對這樣的說法你會感到新鮮,畢竟,它是一個樣式表,難道不應該承擔大多數(shù)(假如不是悉數(shù))的樣式嗎?那不正是我們想要的嗎?
的確。但是通常來講,事情并沒有那么簡單。內(nèi)容與體現(xiàn)(presentation)相星散是件好事,但CSS從HTML中自力出來并不意味著內(nèi)容也需要從體現(xiàn)中星散。換句話說,假如CSS請求深入分析HTML架構(gòu),那么從HTML中分拆所有的顯示代碼并不一定會實現(xiàn)所有的目標。
此外,HTML很少會只包含內(nèi)容,也透露表現(xiàn)整體框架。通常,架構(gòu)是會包含container元素,許可CSS隔離一些固定元素。即使沒有表象類(presentational classes),也能混合HTML清晰地把內(nèi)容展示出來。
我相信,鑒于當前的HTML和CSS狀況,把HTML和CSS明智地結(jié)合起來,當做體現(xiàn)層是特別很是需要的。而通過模板和局部模板(partials)也可以把內(nèi)容層進行星散。
分享文章:CSS架構(gòu)
本文路徑:http://m.rwnh.cn/news26/278326.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站改版、企業(yè)建站、搜索引擎優(yōu)化、手機網(wǎng)站建設、網(wǎng)站制作、建站公司
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容