css中class究竟是雞肋還是雞肉

css3中，提供了新型的，可以使用通配符的選擇方法。例如：[id=^sec]{

我們提供的服務(wù)有：成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、廈門ssl等。為上千多家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的廈門網(wǎng)站制作公司

}，表示將此樣式，應(yīng)用在所有id以sec開頭的html元素，比如id為section、sec3等的元素都會(huì)受到這些規(guī)則的影響。這樣，我們就可以通過元素命名，來區(qū)別不同功能區(qū)域，并且使用通配符選擇器來統(tǒng)一樣式。而這一點(diǎn)，和class的功能類似。class與id的區(qū)別就在于，id一個(gè)網(wǎng)頁中，只能有一個(gè)，而class可以有多個(gè)，這樣可以讓多個(gè)元素使用相同的樣式。

因此，作者在書中說，不推薦使用class，class最終會(huì)消失。然而在另一本前端著作《編寫高質(zhì)量代碼Web前端開發(fā)修煉之道》中，卻推薦使用原子類的方法，來提高css樣式的重用程度。之前，本人也寫過一篇關(guān)于創(chuàng)建和使用原子類的文章，并且在現(xiàn)在的設(shè)計(jì)中應(yīng)用原子類，感覺非常方便靈活性非常強(qiáng)大。在這里，潛行者m不禁思考，class究竟可取不可取？是雞肉還是雞肋？

class和id的區(qū)別

html中class和id屬性，是用來標(biāo)記元素、區(qū)別元素，這樣就可以用css來精確控制樣式，也可以使用javascript來控制元素。但class和id是有明顯區(qū)別的，在網(wǎng)頁中，id屬性的值只能有一個(gè)，但是class的值是可以重復(fù)的。比如，我定義一個(gè)div的id為a，那么網(wǎng)頁中不能再出現(xiàn)一個(gè)html元素的id為a；但是我定義一個(gè)div的class屬性為b，我可以再其他的元素中，定義class屬性為b。這樣，就可以實(shí)現(xiàn)代碼的重用，比如兩個(gè)div都是紅色背景，只需寫出一個(gè)class（.r{background-color:#ff0000;})，然后在兩個(gè)div中都指定class屬性為

r

即可，而要使用id控制，則需要在兩個(gè)div中，都寫上background-color:#ff0000;。同時(shí)，id和class的優(yōu)先級也是不同的，id的優(yōu)先級要高于class，如果對同一個(gè)元素，分別用id和class指定同一屬性不同的值，瀏覽器會(huì)優(yōu)先解析id的值。

雞肉說：

class可以極大的提高代碼的重用，特別是使用原子類，既方便維護(hù)，又方便應(yīng)用。而使用id，必須指定id然后指定大量重復(fù)的樣式。css3中，雖然升級的強(qiáng)大的選擇規(guī)則，但是仍然比較混亂，不利于維護(hù)。同時(shí)，存在即合理，w3c制定出class和id是有他們的道理的，負(fù)責(zé)不同的工作，class仍然會(huì)不斷的被使用。

雞肋說：

css3中，強(qiáng)大的id選擇規(guī)則，已經(jīng)可以對相近元素指定相同的樣式，達(dá)到重用的目的。它已經(jīng)完全可以取代class的作用，而且對于javascript來說，只能使用id來控制，說不定以后class就會(huì)消失了。

幾個(gè)必須掌握的css概念：重用，子選擇器和組選擇器

這個(gè)可以看看HTML5課程大綱了解啊，分階段學(xué)習(xí)的，不同階段學(xué)習(xí)的內(nèi)容可以了解下。

第一階段：PCterminal

★ PC端頁面重構(gòu)

1、認(rèn)知行業(yè)、崗位、部分專業(yè)術(shù)語，就業(yè)趨勢與行業(yè)未來展望；

2、HTML5核心元素及布局應(yīng)用；

3、CSS3核心屬性及布局應(yīng)用；

4、圖形、圖像軟件的使用（PS,FW,AI）；

5、瀏覽器兼容及解決方案；

6、圖片整合、滑動(dòng)門及寬高自適應(yīng)等高級應(yīng)用技術(shù)；

7、初步接觸JS。

★ PC端交互開發(fā)（原生JS）

1、javascript基礎(chǔ)語法和變量、控制語句、循環(huán)語句、函數(shù)、事件處理、數(shù)組、常見排序算法；

2、DOM操作和BOM操作；

3、定時(shí)器、Cookie本地存儲(chǔ)、內(nèi)置對象、正則表達(dá)式、閉包、JS面向?qū)ο笳Z法、JSON、堆棧結(jié)構(gòu)；

4、Ajax動(dòng)態(tài)讀取數(shù)據(jù)、異步操作、與DOM、JSON的結(jié)合使用；

5、各種主流瀏覽器兼容性處理；

6、單例、工廠、代理、觀察者等設(shè)計(jì)模式；

7、ECMA6.0新特性介紹。

★ PC端交互開發(fā) （JQuery）

1、初識(shí)jQuery、jQuery的優(yōu)勢、jQuery框架核心功能、最容易混淆的幾個(gè)概念

2、jQuery各種選擇器的使用，及選擇器的應(yīng)用優(yōu)化；

3、Dom節(jié)點(diǎn)操作、插入、刪除、復(fù)制、移動(dòng)節(jié)點(diǎn)等操作；

4、事件處理、事件處理模型、事件處理機(jī)制、jQuery事件封裝機(jī)制、jQuery事件應(yīng)用；

5、jQuery中的動(dòng)畫、動(dòng)畫時(shí)間的概念、基本動(dòng)畫方法、復(fù)雜動(dòng)畫方法、停止動(dòng)畫與參數(shù)說明、jQuery動(dòng)畫的隊(duì)列問題；

6、表單開發(fā)，設(shè)計(jì)可用性表單、表單驗(yàn)證、增強(qiáng)型表單；

7、Ajax、XMLHttpRequest 基礎(chǔ)、jQuery Ajax、工具函數(shù)、緩存；

8、在jQuery中編寫插件、插件擴(kuò)展、插件應(yīng)用、jQuery.pagination分頁、jQuery.qtip信息提示、 jQuery.artDialog彈出層、jQuery.jscrollpane滾動(dòng)條；

9、理解模塊式開發(fā)，以及requirejs插件的使用。

★ PC項(xiàng)目實(shí)訓(xùn)

1、了解項(xiàng)目需求，項(xiàng)目流程；

2、了解項(xiàng)目管理，模塊分配，項(xiàng)目時(shí)間預(yù)估；

3、了解產(chǎn)品周期，參與團(tuán)隊(duì)協(xié)作；

4、綜合運(yùn)用HTML+CSS,JS,JQ,JQUERY UI, jquery easyui等技術(shù)，完成大型PC端項(xiàng)目開發(fā)。

第二階段：Mobile terminal

HTML5+CSS3新添特性

1、HTML5概述，新增的元素和廢除的元素、全局屬性；

2、HTML5基礎(chǔ)：新增文檔結(jié)構(gòu)元素（Article、section、nav）智能表單、文件API（FileList對象和File對象、FileReader接口）、拖放API；

3、CSS3基礎(chǔ)：新增的后代選擇器、偽類選擇器、文本陰影、圓角、盒陰影、變形處理（transform）、動(dòng)畫（transitions）、幀定義（key-frames）、旋轉(zhuǎn)（rotate）、 animation；

4、HTML5多媒體audio音頻元素、Video視頻元素、視頻回調(diào)事件；

5、本地存儲(chǔ)web storage、本地緩存；

6、定位基礎(chǔ)知識(shí)以及原理，結(jié)合google（高德）地圖定位；

7、響應(yīng)式布局概念以及語法（@media）、web網(wǎng)頁和mobile網(wǎng)頁的區(qū)別、樣式繼承；

8、Canvas標(biāo)簽基礎(chǔ)知識(shí)、繪制矩形、繪制圓形、使用路徑、圖像裁剪、保存為文件、創(chuàng)建動(dòng)畫。

★ WebAPP項(xiàng)目開發(fā)及實(shí)訓(xùn)

1、angular.js、backbone.js；

2、數(shù)據(jù)交互，ajax與DOM交互應(yīng)用；

3、HTML5+CSS3在實(shí)際項(xiàng)目中的應(yīng)用；

4、項(xiàng)目管理，模塊分配，項(xiàng)目時(shí)間預(yù)估；

5、產(chǎn)品周期，團(tuán)隊(duì)協(xié)作；

6、微信場景開發(fā)；

7、微信平臺(tái)互動(dòng)開發(fā)。

第三階段：混合應(yīng)用開發(fā)及實(shí)訓(xùn)

★ 混合應(yīng)用開發(fā)及綜合實(shí)訓(xùn)

1、混合開發(fā)原理；

2、APP與webAPP；

3、混合應(yīng)用與HTML頁面交互；

4、通過客戶端傳遞數(shù)據(jù)；

5、項(xiàng)目的版本迭代；

6、項(xiàng)目打包與應(yīng)用，生成APK。

css 樣式重定義的問題

問題1，很顯然是不合理的，增加一個(gè)屬性可以，改變就不行。如果硬要這樣做，可以采取細(xì)一點(diǎn)的方式，例如為a定義一個(gè)樣式： .apage a 和 .bpage a 在A頁面是div class="apage"a ....../a/div 而在B頁面 則是 div class="bpage"a ....../a/div

問題2，盡量將所有的樣式表都放在一個(gè)單獨(dú)的CSS文件里，網(wǎng)站所有的頁面都調(diào)用這一個(gè)文件。要明白，CSS、HTML 都不是運(yùn)行程序，而只是代碼，效率和文件的大小有很直接的關(guān)系，如果10個(gè)頁面10個(gè)CSS，明顯的沒有達(dá)到這樣的目的。

瀏覽器打開一個(gè)頁面時(shí)，同時(shí)也下載了CSS到IE的臨時(shí)文件夾中（除非CSS不是一個(gè)單獨(dú)的文件），再打開其他頁面，如果引用的是同一個(gè)CSS，就不會(huì)再進(jìn)行下載。顯而易見，下載10個(gè)文件要比下載1個(gè)文件效率低得多，即使這1個(gè)文件比10文件加起來還大。

回復(fù)樓下的看法：一個(gè)網(wǎng)站的所有頁面不可能有非常多的區(qū)別，況且CSS是在客戶端執(zhí)行，完全不涉及到服務(wù)端，況且瀏覽器是先看樣式名，再根據(jù)樣式名去查找相符合的樣式。不是把所有的樣式都遍歷一次，你所說的打開頁面慢、CUP頻率高貌似不大可能出現(xiàn)。即使有，那也不是因?yàn)闃邮奖砗艽蟮木壒剩词故且驗(yàn)闃邮奖矸浅４螅@樣的影響也小到可以忽略，即使明顯，也只是在客戶端，和客戶機(jī)有較大關(guān)系，對服務(wù)端不會(huì)造成任何壓力。

如果你很不喜歡這樣的方式，至少可以把布局大致相同的頁面引用某一個(gè)CSS，完全不相同的引用另一個(gè)CSS。但是一個(gè)頁面一個(gè)CSS，絕對更不可取。

CSS樣式如何組織規(guī)劃？將樣式寫的簡潔，重用性強(qiáng)。

建議你選擇你所說的“針對樣式的功能寫樣式”，其實(shí)樣式CSS只需要寫一個(gè)就可以，只要你寫的CSS文件不超過30K，那么建議你盡量將CSS代碼都存在一個(gè)CSS文件中，但是如果你怕自己分不清或者難以找到自己想要修改的CSS文件，你也可以分別建立CSS，如首頁使用的CSS就可以命名為index.css，列表頁可以命名為list.css等等。這樣一看就知道是哪里的樣式了。

可以看css是怎么做到重用和概括的 優(yōu)先級

如果a標(biāo)簽內(nèi)的的二個(gè)span元素也有類來定義樣式的話，就不會(huì)發(fā)生變化了。

因此.cell a:hover span {color: #ffffff;} 的寫法可以對A標(biāo)簽下的所有的SPAN元素起作用。

CSS問題：請問如何做到CSS樣式能夠盡量的重用

好問題，每一個(gè)程序員都想解決的問題，但實(shí)際上是不可能的，不斷的重用，意味著色彩、布局簡單，同色調(diào)

網(wǎng)站題目：css樣式重用,css樣式問題
URL分享：http://chinadenli.net/article31/dsgogpd.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、網(wǎng)站營銷、微信公眾號(hào)、全網(wǎng)營銷推廣、網(wǎng)站設(shè)計(jì)、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)