資訊專欄INFORMATION COLUMN
摘要：一些富交互的框架大多使用這種類型。見過京東的采用這種簡寫，不過他會加一個注釋，注明的縮寫是。其他命名空間和，表狀態(tài)，表示綁定的事件。
這一期不涉及框架更新，我們來簡單介紹一個各種 CSS 寫法。各種寫法大致就是相互借鑒吧。
BEMmenu 是 block 區(qū)塊，而 item 是 element 元素，selected 是 modify 狀態(tài)。相比較普通的而言，它沒有優(yōu)先級問題。
由于我們的純 css 面向的是前端頁面，優(yōu)先級問題出現(xiàn)的還是比較少。一些富交互的 UI 框架大多使用這種類型。
OOCSS大概像這樣，跟輔助類比較像。
或者這樣，這里加了一個命名空間 s 。跟 BEM 結(jié)合起來畫風(fēng)像這樣。
.btn .btn--small .btn--red .btn--blue .btn--largeSMACSS
Base Rules (全局重置樣式等)
Layout Rules 用l-或layout-這樣的前綴，例如：.l-header、.l-sidebar。見過京東的采用這種簡寫，不過他會加一個注釋，注明 layout 的縮寫是 l。
Module Rules 用模塊本身的命名，例如圖文排列的.media、.media-image。
State Rules 用 is- 前綴，例如：.is-active、.is-hidden。比如 bulma 里面的一些修飾符，其實都是 is 或者 has 開頭的。
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 中的單個文件，其實就是模塊，加上了 scoped 之后，都會有自己的模塊 ID，其實就相當(dāng)于加上了這樣的前綴，而 react 也有一種叫做 CSS-BLOCKS 的東西。
CSS-BLOCKS好像只能用在 react 里面，在官網(wǎng)沒看到多帶帶使用的例子，它編譯出來的 class 名稱會自動縮短。筆者 react 經(jīng)驗不多，所以也就沒有真正是實踐與深究這個框架。
通過 scope 約束作用域，通過 state 創(chuàng)建狀態(tài)，比如激活狀態(tài)，不可用狀態(tài)等等。
不過他也有一些缺點或者說強約定，一些偽類不支持嵌套，以及屬性選擇器，id 選擇器等等。
:scope {}
:scope[state|enabled] { }
.sub-element { }
// 任意值時，包括無值
.sub-element[state|color] { }
// 特殊值
.sub-element[state|color="red"] { }
.sub-element[state|color="blue"] { }
.sub-element[state|color="yellow"] { }
當(dāng)映射到 jsx 上面時候，要這樣使用。
:scope { }
:scope[state|enabled] { }
.button { }
.icon { }
.icon[state|inverse] { }
AtomicCSS
這個像函數(shù)調(diào)用，在 class 上面有些異類，邪教的感覺。不過在 js 里面倒是感覺正常些，被 Block-CSS 接納。
.Fl(start) {
float: left;
}
.M(10px) {
margin: 10px;
}
ITCSS
用這個規(guī)則寫 sass 嵌套會少一些。
設(shè)置可被覆蓋的配置項
基本 （重置樣式）
顏色 （基本色調(diào)）
排版 （行高，字體，字號）
動畫 （animation 幀）
工具utils 函數(shù)
函數(shù) （@function 定義的）
占位符 （sass 中 % 開頭的，選擇器的復(fù)用）
混合宏 （mixin，sass 中 = 開頭的）
媒體查詢
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 ，會 php 的應(yīng)該對這個文件很熟悉，noder 可以理解為 node_modules。即通過 npm 安裝的第三方工具包，reset.css 等。
對象通產(chǎn)有一個命名空間（o-）, Object 的縮寫，所有頁面都是用的對象類，比如容器，布局等。
o-page 包裹一下，避免想要操作整個頁面需要選取 html
o-gird 網(wǎng)格布局
o-container 某個組件外部容器類，固定最大寬度，可伸縮
o-main 主體內(nèi)容區(qū)域，跟 main 標(biāo)簽類似
o-content 文本內(nèi)容區(qū)域，或內(nèi)部容器。
元素element， 以 e- 開頭
組件component，以 c- 開頭
作用域scope 以 s- 開頭
模式pattern 以 p- 開頭，組件的組合體，不可復(fù)用的結(jié)構(gòu)。
其他命名空間is- 和 js-，is- 表狀態(tài)，js 表示 javascript 綁定的事件。
說了那么多，你喜歡哪一個呢？本 css 框架，不涉及任何 css 書寫規(guī)范，這些更多應(yīng)用于實際頁面開發(fā)，而不是框架開發(fā)，為所有組件都添加一個 c- 命名空間，感覺也很奇怪.
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/116898.html
摘要：規(guī)范名稱定義，便于維護。譬如關(guān)于的定義在格式化的中會聲明為，而在基本樣式的中又可能會聲明所以在中會出現(xiàn)多次定義。盡量減少連接數(shù)和的大小?；诎姹镜氖褂媚壳笆褂幂^廣的是版本和，其中的最新版本是的最新版本。 隨著CSS3和HTML5的流行，我們的WEB頁面不僅需要更人性化的設(shè)計理念，而且需要更酷的頁面特效和用戶體驗。作為開發(fā)者，我們需要了解一些寶貴的CSS UI開源框架資源，它們可以幫助我...
摘要：規(guī)范名稱定義，便于維護。譬如關(guān)于的定義在格式化的中會聲明為，而在基本樣式的中又可能會聲明所以在中會出現(xiàn)多次定義。盡量減少連接數(shù)和的大小?；诎姹镜氖褂媚壳笆褂幂^廣的是版本和，其中的最新版本是的最新版本。 隨著CSS3和HTML5的流行，我們的WEB頁面不僅需要更人性化的設(shè)計理念，而且需要更酷的頁面特效和用戶體驗。作為開發(fā)者，我們需要了解一些寶貴的CSS UI開源框架資源，它們可以幫助我...
摘要：規(guī)范名稱定義，便于維護。譬如關(guān)于的定義在格式化的中會聲明為，而在基本樣式的中又可能會聲明所以在中會出現(xiàn)多次定義。盡量減少連接數(shù)和的大小?；诎姹镜氖褂媚壳笆褂幂^廣的是版本和，其中的最新版本是的最新版本。 隨著CSS3和HTML5的流行，我們的WEB頁面不僅需要更人性化的設(shè)計理念，而且需要更酷的頁面特效和用戶體驗。作為開發(fā)者，我們需要了解一些寶貴的CSS UI開源框架資源，它們可以幫助我...
摘要：前言本文主要是有關(guān)前端方面知識按照目前的認(rèn)知進行的收集歸類概括和整理，涵蓋前端理論與前端實踐兩方面。 前言：本文主要是有關(guān)前端方面知識按照 XX 目前的認(rèn)知進行的收集、歸類、概括和整理，涵蓋『前端理論』與『前端實踐』兩方面。本文會告訴你前端需要了解的知識大致有什么，看上去有很多，但具體你要學(xué)什么，還是要 follow your heart & follow your BOSS。 初衷...
閱讀 3748·2021-10-09 09:44
閱讀 3507·2021-09-22 15:29
閱讀 3293·2019-08-30 15:54
閱讀 3075·2019-08-29 16:19
閱讀 2218·2019-08-29 12:50
閱讀 645·2019-08-26 14:04
閱讀 1772·2019-08-23 18:39
閱讀 1401·2019-08-23 17:59
