开发一个自己的 CSS 框架（三）

nodelover4713
364 阅读4分钟

这一期不涉及框架更新，我们来简单介绍一个各种 CSS 写法。各种写法大致就是相互借鉴吧。

BEM

<ul class="menu">
	<li class="menu__item menu__item--selected"></li>
	<li class="menu__item"></li>
	<li class="menu__item"></li>
</ul>

menu 是 block 区块，而 item 是 element 元素，selected 是 modify 状态。相比较普通的而言，它没有优先级问题。

由于我们的纯 css 面向的是前端页面，优先级问题出现的还是比较少。一些富交互的 UI 框架大多使用这种类型。

OOCSS

大概像这样，跟辅助类比较像。

<div class="size1of4 bgBlue solidGray mts mlm mrm mbm"></div>

或者这样，这里加了一个命名空间 s 。跟 BEM 结合起来画风像这样。

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

SMACSS

  • 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] {  }

<section state:enabled={{isEnabled}}>
  <button class="button">
    <div class="icon" state:inverse={{isInverse}}></div>
    {{value}}
  </button>
</section>

AtomicCSS

这个像函数调用，在 class 上面有些异类，邪教的感觉。不过在 js 里面倒是感觉正常些，被 Block-CSS 接纳。

<div class="BfcHack M(10px)">
	<a class="Fl(start) Mend(10px)">
		<img >
	</a>
</div>

.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- 命名空间，感觉也很奇怪.

avatar
文章
阅读
粉丝

友情链接：