成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

開(kāi)發(fā)一個(gè)自己的 CSS 框架（三）

mikyou / 3203人閱讀

摘要：一些富交互的框架大多使用這種類型。見(jiàn)過(guò)京東的采用這種簡(jiǎn)寫(xiě)，不過(guò)他會(huì)加一個(gè)注釋，注明的縮寫(xiě)是。其他命名空間和，表狀態(tài)，表示綁定的事件。

這一期不涉及框架更新，我們來(lái)簡(jiǎn)單介紹一個(gè)各種 CSS 寫(xiě)法。各種寫(xiě)法大致就是相互借鑒吧。

BEM 
    
    
  • 
    
  • 
    
  •

menu 是 block 區(qū)塊，而 item 是 element 元素，selected 是 modify 狀態(tài)。相比較普通的而言，它沒(méi)有優(yōu)先級(jí)問(wèn)題。

由于我們的純 css 面向的是前端頁(yè)面，優(yōu)先級(jí)問(wèn)題出現(xiàn)的還是比較少。一些富交互的 UI 框架大多使用這種類型。

OOCSS

大概像這樣，跟輔助類比較像。

或者這樣，這里加了一個(gè)命名空間 s 。跟 BEM 結(jié)合起來(lái)畫(huà)風(fēng)像這樣。

.btn
.btn--small
.btn--red
.btn--blue
.btn--large
SMACSS

Base Rules (全局重置樣式等)

Layout Rules 用l-或layout-這樣的前綴，例如：.l-header、.l-sidebar。見(jiàn)過(guò)京東的采用這種簡(jiǎn)寫(xiě)，不過(guò)他會(huì)加一個(gè)注釋，注明 layout 的縮寫(xiě)是 l。

Module Rules 用模塊本身的命名，例如圖文排列的.media、.media-image。

State Rules 用 is- 前綴，例如：.is-active、.is-hidden。比如 bulma 里面的一些修飾符，其實(shí)都是 is 或者 has 開(kāi)頭的。

Theme Rules 如果作為多帶帶 class，用 theme- 前綴，例如 .theme-a-background、.theme-a-shadow。

.layout-header {}
.layout-container {}
.layout-sidebar {}
.layout-content {}
.layout-footer {}

也可以自定義

.todolist{}
.todolist-title{}
.todolist-image{}
.todolist-article{}

在 Vue 中的單個(gè)文件，其實(shí)就是模塊，加上了 scoped 之后，都會(huì)有自己的模塊 ID，其實(shí)就相當(dāng)于加上了這樣的前綴，而 react 也有一種叫做 CSS-BLOCKS 的東西。

CSS-BLOCKS

好像只能用在 react 里面，在官網(wǎng)沒(méi)看到多帶帶使用的例子，它編譯出來(lái)的 class 名稱會(huì)自動(dòng)縮短。筆者 react 經(jīng)驗(yàn)不多，所以也就沒(méi)有真正是實(shí)踐與深究這個(gè)框架。

通過(guò) scope 約束作用域，通過(guò) state 創(chuàng)建狀態(tài)，比如激活狀態(tài)，不可用狀態(tài)等等。

不過(guò)他也有一些缺點(diǎn)或者說(shuō)強(qiáng)約定，一些偽類不支持嵌套，以及屬性選擇器，id 選擇器等等。

:scope {}
:scope[state|enabled] { }

.sub-element { }
// 任意值時(shí)，包括無(wú)值
.sub-element[state|color] { }
// 特殊值
.sub-element[state|color="red"] { }
.sub-element[state|color="blue"] { }
.sub-element[state|color="yellow"] { }

當(dāng)映射到 jsx 上面時(shí)候，要這樣使用。

:scope {  }
:scope[state|enabled] {  }
.button {  }
.icon {  }
.icon[state|inverse] {  }
AtomicCSS

這個(gè)像函數(shù)調(diào)用，在 class 上面有些異類，邪教的感覺(jué)。不過(guò)在 js 里面倒是感覺(jué)正常些，被 Block-CSS 接納。

.Fl(start) {
 float: left;
}
.M(10px) {
 margin: 10px;
}
ITCSS

用這個(gè)規(guī)則寫(xiě) sass 嵌套會(huì)少一些。

設(shè)置

可被覆蓋的配置項(xiàng)

基本 （重置樣式）

顏色 （基本色調(diào)）

排版 （行高，字體，字號(hào)）

動(dòng)畫(huà) （animation 幀）

工具

utils 函數(shù)

函數(shù) （@function 定義的）

占位符 （sass 中 % 開(kāi)頭的，選擇器的復(fù)用）

混合宏 （mixin，sass 中 = 開(kāi)頭的）

媒體查詢

sass 混合宏

=from($device)
  @media screen and (min-width: $device)
    @content

sass 函數(shù)

@function powerNumber($number, $exp)
  $value: 1
  @if $exp > 0
    @for $i from 1 through $exp
      $value: $value * $number
  @else if $exp < 0
    @for $i from 1 through -$exp
      $value: $value / $number
  @return $value
供應(yīng)商

vendor ，會(huì) php 的應(yīng)該對(duì)這個(gè)文件很熟悉，noder 可以理解為 node_modules。即通過(guò) npm 安裝的第三方工具包，reset.css 等。

對(duì)象

通產(chǎn)有一個(gè)命名空間（o-）, Object 的縮寫(xiě)，所有頁(yè)面都是用的對(duì)象類，比如容器，布局等。

o-page 包裹一下，避免想要操作整個(gè)頁(yè)面需要選取 html

o-gird 網(wǎng)格布局

o-container 某個(gè)組件外部容器類，固定最大寬度，可伸縮

o-main 主體內(nèi)容區(qū)域，跟 main 標(biāo)簽類似

o-content 文本內(nèi)容區(qū)域，或內(nèi)部容器。

元素

element， 以 e- 開(kāi)頭

組件

component，以 c- 開(kāi)頭

作用域

scope 以 s- 開(kāi)頭

模式

pattern 以 p- 開(kāi)頭，組件的組合體，不可復(fù)用的結(jié)構(gòu)。

其他命名空間

is- 和 js-，is- 表狀態(tài)，js 表示 javascript 綁定的事件。

說(shuō)了那么多，你喜歡哪一個(gè)呢？本 css 框架，不涉及任何 css 書(shū)寫(xiě)規(guī)范，這些更多應(yīng)用于實(shí)際頁(yè)面開(kāi)發(fā)，而不是框架開(kāi)發(fā)，為所有組件都添加一個(gè) c- 命名空間，感覺(jué)也很奇怪.

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/116898.html

相關(guān)文章

  • 關(guān)于BOOTSTRAP的整理和理解

    摘要：規(guī)范名稱定義，便于維護(hù)。譬如關(guān)于的定義在格式化的中會(huì)聲明為，而在基本樣式的中又可能會(huì)聲明所以在中會(huì)出現(xiàn)多次定義。盡量減少連接數(shù)和的大小?；诎姹镜氖褂媚壳笆褂幂^廣的是版本和，其中的最新版本是的最新版本。 隨著CSS3和HTML5的流行，我們的WEB頁(yè)面不僅需要更人性化的設(shè)計(jì)理念，而且需要更酷的頁(yè)面特效和用戶體驗(yàn)。作為開(kāi)發(fā)者，我們需要了解一些寶貴的CSS UI開(kāi)源框架資源，它們可以幫助我...

    amc 評(píng)論0 收藏0

  • 關(guān)于BOOTSTRAP的整理和理解

    摘要：規(guī)范名稱定義，便于維護(hù)。譬如關(guān)于的定義在格式化的中會(huì)聲明為，而在基本樣式的中又可能會(huì)聲明所以在中會(huì)出現(xiàn)多次定義。盡量減少連接數(shù)和的大小。基于版本的使用目前使用較廣的是版本和，其中的最新版本是的最新版本。 隨著CSS3和HTML5的流行，我們的WEB頁(yè)面不僅需要更人性化的設(shè)計(jì)理念，而且需要更酷的頁(yè)面特效和用戶體驗(yàn)。作為開(kāi)發(fā)者，我們需要了解一些寶貴的CSS UI開(kāi)源框架資源，它們可以幫助我...

    Tony_Zby 評(píng)論0 收藏0

  • 關(guān)于BOOTSTRAP的整理和理解

    摘要：規(guī)范名稱定義，便于維護(hù)。譬如關(guān)于的定義在格式化的中會(huì)聲明為，而在基本樣式的中又可能會(huì)聲明所以在中會(huì)出現(xiàn)多次定義。盡量減少連接數(shù)和的大小?；诎姹镜氖褂媚壳笆褂幂^廣的是版本和，其中的最新版本是的最新版本。 隨著CSS3和HTML5的流行，我們的WEB頁(yè)面不僅需要更人性化的設(shè)計(jì)理念，而且需要更酷的頁(yè)面特效和用戶體驗(yàn)。作為開(kāi)發(fā)者，我們需要了解一些寶貴的CSS UI開(kāi)源框架資源，它們可以幫助我...

    zeyu 評(píng)論0 收藏0

  • 前端開(kāi)發(fā)知識(shí)點(diǎn)整理

    摘要：前言本文主要是有關(guān)前端方面知識(shí)按照目前的認(rèn)知進(jìn)行的收集歸類概括和整理，涵蓋前端理論與前端實(shí)踐兩方面。 前言：本文主要是有關(guān)前端方面知識(shí)按照 XX 目前的認(rèn)知進(jìn)行的收集、歸類、概括和整理，涵蓋『前端理論』與『前端實(shí)踐』兩方面。本文會(huì)告訴你前端需要了解的知識(shí)大致有什么，看上去有很多，但具體你要學(xué)什么，還是要 follow your heart & follow your BOSS。 初衷...

    Blackjun 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<