真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

CSS的OOCSS架構(gòu)是什么

本篇內(nèi)容主要講解“CSS的OOCSS架構(gòu)是什么”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“CSS的OOCSS架構(gòu)是什么”吧!

10多年的嵐縣網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。全網(wǎng)營(yíng)銷推廣的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整嵐縣建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)公司從事“嵐縣網(wǎng)站設(shè)計(jì)”,“嵐縣網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

CSS的OOCSS架構(gòu)是什么

面向?qū)ο缶幊?/strong>

如果你有面向?qū)ο缶幊探?jīng)驗(yàn)完全可以略過(guò)這一節(jié)。

在進(jìn)入 OOCSS 的學(xué)習(xí)之前，我們要先了解下面向?qū)ο缶幊獭Ｃ嫦驅(qū)ο缶幊?是1950 年代后期 開(kāi)始在 MIT 的人工智能小組環(huán)境中出現(xiàn)，根據(jù)維基百科：

面向?qū)ο缶幊?(OOP) 是一種編程范式，它將概念表示為具有數(shù)據(jù)字段（描述對(duì)象的屬性）和稱為方法的相關(guān)過(guò)程的“對(duì)象”。對(duì)象是類的實(shí)例，用于相互交互以設(shè)計(jì)應(yīng)用程序和計(jì)算機(jī)程序。

面向?qū)ο筮€有三大特征：繼承、封裝、多態(tài)。

OOP 已經(jīng)在 JavaScript 和后端語(yǔ)言中廣泛使用了幾年，但根據(jù)其原則組織 CSS 仍然相對(duì)較新。通俗地說(shuō)，OOP 是使您的代碼可重用、高效且快速的實(shí)踐。

過(guò)多概念就不用介紹了，來(lái)看看我們?nèi)腴T JavaScript 的時(shí)候，相信每個(gè)人都學(xué)習(xí)實(shí)踐過(guò)的 Animal 類來(lái)輔助我們理解 OOP：

// 基類 / 父類
class Animail {
    constructor() {}
    getName() {}
}
// 子類
class Cat extends Animail {
    constructor() {}
    run() {}
    jump() {}
}
// 子類
class Fish extends Animail {
    constructor() {}
    swim () {}
}

什么是 OOCSS？

概念總是難于理解的，所以我們快速進(jìn)入一個(gè)示例，然后在了解什么是 OOCSS？

在我們還是 CSS 新手的時(shí)候，我們組織 CSS 代碼的時(shí)候，有時(shí)候會(huì)寫出如下代碼：

/* 不好的方式 */
.box-1 {
  border: 1px solid #ccc;
  width: 200px;
  height: 200px;
  border-radius: 10px;
}
.box-2 {
  border: 1px solid #ccc;
  width: 120px;
  height: 120px
  border-radius: 10px;
}

你不難發(fā)現(xiàn)，代碼中有一些重復(fù)的樣式出現(xiàn)，維護(hù)這段代碼時(shí)，如果你想改變 border-radius 或 border 的屬性值，不得不在兩個(gè)地方同時(shí)修改。

為了便于維護(hù)，我們可以把重復(fù)的代碼提取出來(lái)放到一個(gè)新的類名中，作為基礎(chǔ)類名，這樣當(dāng)有新的更改就不需要去維護(hù)兩份代碼了：

/* 好的方式 */
/* 重復(fù)的代碼 */
.box-border{
  border: 1px solid #CCC;
  border-radius: 10px;
}
.box-1 {
  width: 200px;
  height: 200px;
}
.box-2 {
  width: 120px;
  height: 120px;
}

在 HTML 結(jié)構(gòu)中，我們就可以這樣使用了：

Learn OOP
Learn CSS

如果我們把新改的 CSS 代碼抽象下，我們就可以這樣認(rèn)為：

如果我們想讓兩個(gè) div 的樣式達(dá)到理想的效果，沒(méi)有 box-border 這個(gè)公共類名，本身 box-1 和 box-2 單獨(dú)作用是達(dá)不到理想的樣式效果，換句話說(shuō) box-border 是基類 box-1 和 box-2 就是子類。

這就是在 CSS 中硬抽象出來(lái)的 OOP 概念，叫 OOCSS。

不過(guò) OOCSS 的作者 Nicole Sullivan 是用下面這句話來(lái)總結(jié) CSS 的面向?qū)ο缶幊?，?/p>

It’s a repeating visual pattern, that can be abstracted into an independent snippet of HTML, CSS, and possibly JavaScript.

這是一個(gè)重復(fù)的視覺(jué)模式，可以抽象為 HTML、CSS 和可能的 JavaScript 的獨(dú)立片段。

Nicole Sullivan

明白了什么是 OOCSS，相信你對(duì) OOCSS 可以編寫出可擴(kuò)展、可維護(hù)的 CSS 也有一定的了解了，而此時(shí)你也應(yīng)該明白，雖然之前我們可能你沒(méi)聽(tīng)說(shuō)過(guò) OOCSS 的概念，但是項(xiàng)目中絕對(duì)在不知不覺(jué)的使用了這個(gè)技能。

好了，接下來(lái)我們來(lái)真正學(xué)習(xí)什么 OOCSS？

OOCSS (Object-Oriented CSS 翻譯為 面向?qū)ο?CSS) 是組織 CSS 的領(lǐng)先的模塊化或基于組件的系統(tǒng)。它是 Nicole Sullivan 在 2008 年在 Web Directions North 大會(huì)上首次提出的。

她同時(shí)提到，在構(gòu)建 OOCSS 時(shí)，抽象是首先要考慮的，但還有兩個(gè)基本原則要遵循：

記住這兩個(gè)原則的核心就是編寫可復(fù)用和可維護(hù)的樣式。

分離結(jié)構(gòu)和皮膚

皮膚是我們可見(jiàn)的視覺(jué)屬性，例如：

結(jié)構(gòu)當(dāng)然就是我們不可見(jiàn)的視覺(jué)屬性，例如：

這么分離也是有依據(jù)的，給你舉個(gè)生動(dòng)形象的例子，都打過(guò)王者榮耀吧，如果你是忠愛(ài)粉可能還花錢買過(guò)皮膚，刷刷的一換，英雄瞬間逼格高了不少，我們網(wǎng)頁(yè)的結(jié)構(gòu)和皮膚相互分離和王者的英雄換膚一個(gè)道理。

這個(gè)好例子就是我們上面舉的這個(gè)例子：

/* 好的方式 */
/* 重復(fù)的代碼 */
.box-border{
  border: 1px solid #CCC;
  border-radius: 10px;
}
.box-1 {
  width: 200px;
  height: 200px;
}
.box-2 {
  width: 120px;
  height: 120px;
}

在 HTML 結(jié)構(gòu)：

Learn OOP
Learn CSS

分離容器和內(nèi)容

我們對(duì)著下面這個(gè)例子講解：




  




  

  

上面這個(gè)例子，h3 被鎖定在 menu 這個(gè)容器里面了，如果一不小心改變了 HTML 的結(jié)構(gòu)就會(huì)導(dǎo)致我們寫的 CSS 無(wú)效，非常的不便于維護(hù)，而且作用于 h3 標(biāo)簽上的樣式還無(wú)法復(fù)用，真是讓人頭疼。

根據(jù)容器和內(nèi)容分離的原則，我們應(yīng)該讓容器和內(nèi)容有各自的樣式，同時(shí)避免使用標(biāo)簽選擇器，改寫得到如下代碼




  




  

  

OK，這樣代碼就非常便于維護(hù)和復(fù)用了，切記在項(xiàng)目中，我們應(yīng)該禁止使用和位置相關(guān)的樣式還有標(biāo)簽選擇器。

優(yōu)點(diǎn)和缺點(diǎn)

上面反復(fù)強(qiáng)調(diào)使用 OOCSS 的好處就是 編寫可復(fù)用和可維護(hù)的樣式 這兩個(gè)特點(diǎn)，此篇我們來(lái)總結(jié)下 OOCSS 的優(yōu)缺點(diǎn)：

優(yōu)點(diǎn)

缺點(diǎn)

雖然使用 OOCSS 有很多好處，但也有一些缺點(diǎn)：

語(yǔ)義化和可維護(hù)也是需要平衡的，不過(guò)對(duì)于我更需要的是代碼的可維護(hù)，對(duì)于這個(gè)我們可以使用 CSS 預(yù)處理器解決，例如 Sass/Less。

Sass/Less 的繼承

還記得 OOP 編程三大特性吧，其中之一就是繼承，正好對(duì)應(yīng)了 Sass/Less 的 extend，你說(shuō)這不巧了嗎不是。

根據(jù) OOCSS 當(dāng)我們需要一個(gè)按鈕：

/* 不好的方式 */
.button-structure {
  min-width: 100px;
  padding: 1em;
  border-radius: 1em;
}
.button-skip {
  color: #fff;
  background: #55acee;
}

在 Sass 中，我們可以使用 %placeholder 來(lái)創(chuàng)建對(duì)象，通過(guò) @extend 在類中調(diào)用，將其合在一起。這樣就可以自己組織代碼：

/* 好的方式 */
%button-structure {
  min-width: 100px;
  padding: 1em;
  border-radius: 1em;
}
%button-skip {
  color: #fff;
  background: #55acee;
}
.btn {
    @extend %button-structure;
    @extend %button-skip;
}

重點(diǎn)來(lái)了，一個(gè)業(yè)務(wù)類名解決：

到此，相信大家對(duì)“CSS的OOCSS架構(gòu)是什么”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！


本文名稱：CSS的OOCSS架構(gòu)是什么
分享地址：http://weahome.cn/article/pgihis.html

在線咨詢

微信咨詢

電話咨詢

028-86922220（工作日）

18980820575（7×24）

提交需求

返回頂部