摘要：一些富交互的框架大多使用这种类型。见过京东的采用这种简写，不过他会加一个注释，注明的缩写是。其他命名空间和，表状态，表示绑定的事件。
这一期不涉及框架更新，我们来简单介绍一个各种 CSS 写法。各种写法大致就是相互借鉴吧。
BEMmenu 是 block 区块，而 item 是 element 元素，selected 是 modify 状态。相比较普通的而言，它没有优先级问题。
由于我们的纯 css 面向的是前端页面，优先级问题出现的还是比较少。一些富交互的 UI 框架大多使用这种类型。
OOCSS大概像这样，跟辅助类比较像。
或者这样，这里加了一个命名空间 s 。跟 BEM 结合起来画风像这样。
.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，其实就相当于加上了这样的前缀，而 react 也有一种叫做 CSS-BLOCKS 的东西。
CSS-BLOCKS好像只能用在 react 里面，在官网没看到多带带使用的例子，它编译出来的 class 名称会自动缩短。笔者 react 经验不多，所以也就没有真正是实践与深究这个框架。
通过 scope 约束作用域，通过 state 创建状态，比如激活状态，不可用状态等等。
不过他也有一些缺点或者说强约定，一些伪类不支持嵌套，以及属性选择器，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"] { }
当映射到 jsx 上面时候，要这样使用。
:scope { }
:scope[state|enabled] { }
.button { }
.icon { }
.icon[state|inverse] { }
AtomicCSS
这个像函数调用，在 class 上面有些异类，邪教的感觉。不过在 js 里面倒是感觉正常些，被 Block-CSS 接纳。
.Fl(start) {
float: left;
}
.M(10px) {
margin: 10px;
}
ITCSS
用这个规则写 sass 嵌套会少一些。
设置可被覆盖的配置项
基本 （重置样式）
颜色 （基本色调）
排版 （行高，字体，字号）
动画 （animation 帧）
工具utils 函数
函数 （@function 定义的）
占位符 （sass 中 % 开头的，选择器的复用）
混合宏 （mixin，sass 中 = 开头的）
媒体查询
sass 混合宏
=from($device)
@media screen and (min-width: $device)
@content
sass 函数
@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
供应商
vendor ，会 php 的应该对这个文件很熟悉，noder 可以理解为 node_modules。即通过 npm 安装的第三方工具包，reset.css 等。
对象通产有一个命名空间（o-）, Object 的缩写，所有页面都是用的对象类，比如容器，布局等。
o-page 包裹一下，避免想要操作整个页面需要选取 html
o-gird 网格布局
o-container 某个组件外部容器类，固定最大宽度，可伸缩
o-main 主体内容区域，跟 main 标签类似
o-content 文本内容区域，或内部容器。
元素element， 以 e- 开头
组件component，以 c- 开头
作用域scope 以 s- 开头
模式pattern 以 p- 开头，组件的组合体，不可复用的结构。
其他命名空间is- 和 js-，is- 表状态，js 表示 javascript 绑定的事件。
说了那么多，你喜欢哪一个呢？本 css 框架，不涉及任何 css 书写规范，这些更多应用于实际页面开发，而不是框架开发，为所有组件都添加一个 c- 命名空间，感觉也很奇怪.
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/116898.html
摘要：规范名称定义，便于维护。譬如关于的定义在格式化的中会声明为，而在基本样式的中又可能会声明所以在中会出现多次定义。尽量减少连接数和的大小。基于版本的使用目前使用较广的是版本和，其中的最新版本是的最新版本。 随着CSS3和HTML5的流行，我们的WEB页面不仅需要更人性化的设计理念，而且需要更酷的页面特效和用户体验。作为开发者，我们需要了解一些宝贵的CSS UI开源框架资源，它们可以帮助我...
摘要：规范名称定义，便于维护。譬如关于的定义在格式化的中会声明为，而在基本样式的中又可能会声明所以在中会出现多次定义。尽量减少连接数和的大小。基于版本的使用目前使用较广的是版本和，其中的最新版本是的最新版本。 随着CSS3和HTML5的流行，我们的WEB页面不仅需要更人性化的设计理念，而且需要更酷的页面特效和用户体验。作为开发者，我们需要了解一些宝贵的CSS UI开源框架资源，它们可以帮助我...
摘要：规范名称定义，便于维护。譬如关于的定义在格式化的中会声明为，而在基本样式的中又可能会声明所以在中会出现多次定义。尽量减少连接数和的大小。基于版本的使用目前使用较广的是版本和，其中的最新版本是的最新版本。 随着CSS3和HTML5的流行，我们的WEB页面不仅需要更人性化的设计理念，而且需要更酷的页面特效和用户体验。作为开发者，我们需要了解一些宝贵的CSS UI开源框架资源，它们可以帮助我...
阅读 3624·2021-10-09 09:44
阅读 3173·2021-09-22 15:29
阅读 3049·2019-08-30 15:54
阅读 2998·2019-08-29 16:19
阅读 2121·2019-08-29 12:50
阅读 573·2019-08-26 14:04
阅读 1656·2019-08-23 18:39
阅读 1327·2019-08-23 17:59
