您好,登錄后才能下訂單哦!
OOCSS 意為面向?qū)ο蟮腃SS。這種方法有兩種主要 觀點(diǎn):
使用這套結(jié)構(gòu),開發(fā)者能得到可以在不同地方使用的一般類。
在這一步,會(huì)存在兩點(diǎn)(通常就好和壞):
此外,這種OOCSS的方法本身并沒有明確的規(guī)則,而是抽象的建議,所以這種方法在生產(chǎn)中的結(jié)果會(huì)有不同。
實(shí)際結(jié)果就是,這種OOCSS的思想啟發(fā)了其他人創(chuàng)建出屬于他們自己更具體的代碼結(jié)構(gòu)。
SMACSS意為可擴(kuò)展、模塊化(Scalable and Modular Architecture)的CSS。這種方法的主要目的是減少代碼量,并且使代碼維護(hù)更簡(jiǎn)單。
Jonathan Snook將樣式分為了5個(gè)部分:
另外,還建議對(duì)屬于某個(gè)特定分組的類設(shè)定命名空間,并為JavaScript中使用的類使用單獨(dú)的命名空間。
這種方法使得編寫和維護(hù)代碼都更加容易,并且吸引了很多開發(fā)者。
使用Atomic CSS,為每一個(gè)可重用的屬性創(chuàng)建一個(gè)單獨(dú)的類。比如 margin-top: 1px;就可以創(chuàng)建一個(gè)類 mt-1,width: 200px;可以創(chuàng)建一個(gè)w-200。
這種風(fēng)格允許通過(guò)重復(fù)聲明來(lái)盡可能減少代碼,并且改變模塊樣式也相對(duì)容易,for example, when changing a technical task.
然而,這種方法也有很大的缺點(diǎn):
因?yàn)檫@些缺點(diǎn),這種方法遭到了大量批評(píng)。但是,這種方法對(duì)于大型項(xiàng)目而言,還是很有效的。
此外Atomic CSS也被用在不同的框架里來(lái)指明矯正元素樣式,還有一些其它方法的展現(xiàn)層。
MCSS是多層CSS。這種書寫代碼的風(fēng)格建議將樣式分為幾個(gè)部分,稱為層(layers)。
層級(jí)之間的交互層次是很重要的:
AMCSS就是"Attribute Modules for CSS(css的屬性模塊)"。
讓我們看一個(gè)例子:
<div class="button button--large button--blue">Button</div>
這樣一個(gè)類的鏈并不簡(jiǎn)單,所以讓我通過(guò)屬性來(lái)組織這些值。
結(jié)果如下:
<div button="large blue">Button</div>
為了避免命名沖突,添加命名空間到屬性上是個(gè)好主意。然后,我們的按鈕就變成了下面的樣子:
<div am-button="large blue">Button</div>
如果你使用驗(yàn)證器檢查代碼,會(huì)發(fā)現(xiàn)并沒有am-button這個(gè)屬性,所以可以在屬性名稱前加上data-。
使用一個(gè)鮮為人知,作為class屬性的選擇器"~ =" (IE7+):該選擇器選擇屬性值包含指定單詞的元素,用空格分隔。所以,這種class~="link"的選擇器類似于a.class.button這樣的選擇器。即使專門使用,因?yàn)閏lass選擇器也只是該屬性選擇器的特殊情況。
因此,CSS代碼
.button {...} .button--large {...} .button--blue {...}
轉(zhuǎn)換為
[am-button] {...} [am-button~="large"] {...} [am-button~="blue"] {...}
如果你覺得這樣的代碼不常見,也可以使用不那么激進(jìn)的AMCSS形式:
<div am-button am-button-large am-button-blue></div>
FUN表示選擇器的扁平結(jié)構(gòu)(Flat hierarchy of selectors),功能樣式(Utility styles),命名分割組件(Name-spaced components)。
每個(gè)字母后面都有特定的原則:
一些開發(fā)者注意到使用這種原則來(lái)書寫和維護(hù)代碼是相當(dāng)方便的;在某種程度上,作者拿出了最好的成果,并且以一種簡(jiǎn)潔的方式展示了這項(xiàng)技術(shù)。
這種方法對(duì)項(xiàng)目和代碼結(jié)構(gòu)還有不小要求,它只建立記錄元素的首選形式和標(biāo)記使用的方法。但是在小項(xiàng)目中,這些規(guī)則足夠創(chuàng)建出足夠高質(zhì)量的代碼。
正如你所見,這些方法里并沒有一個(gè)完美的。這些方法中沒有一條絕對(duì)的規(guī)則——你可以從開始使用一套方案來(lái)創(chuàng)建你自己的東西, 或者從頭開始創(chuàng)建一條新的方法。
為了幫助大家讓學(xué)習(xí)變得輕松、高效,給大家免費(fèi)分享一大批資料,幫助大家在成為前端工程師,乃至全棧工程師的路上披荊斬棘。在這里給大家推薦一個(gè)前端全棧學(xué)習(xí)扣qun:784783012 歡迎大家進(jìn)群。交流討論,學(xué)習(xí)交流,共同進(jìn)步。
當(dāng)真正開始學(xué)習(xí)的時(shí)候難免不知道從哪入手,導(dǎo)致效率低下影響繼續(xù)學(xué)習(xí)的信心。
但最重要的是不知道哪些技術(shù)需要重點(diǎn)掌握,學(xué)習(xí)時(shí)頻繁踩坑,最終浪費(fèi)大量時(shí)間,所以有效資源還是很有必要的。
學(xué)習(xí)前端,我們是認(rèn)真的
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。