码迷,mamicode.com
首页 > Web开发 > 详细

如何去组织你的CSS代码

时间:2018-08-19 00:54:51      阅读:197      评论:0      收藏:0      [点我收藏+]

标签:写法   tps   解释   好的   直接   控件   依赖   渐变   menu   

1、Object Oriented CSS (OOCSS)

面向对象的 CSS。OOCSS 的想法首先要明白 CSS 的 “Object” 是个毛线玩意。

CSS的样式是需要应用到页面的结构上的。通俗的讲就是需要应用到HTML标签上。比如一个页面上的一个区域、控件、标签等,就是一个 Object ,大部分情况下,这种 Object 肯定是可以复用的。

常见的比如 Button按钮。视觉上就可能是一个图形按钮,然后我们可以在其上面添加各种样式,以获得我们想要的效果。

Tag : button
calss: btn

OOCSS 有个特点就是结构和样式是分开的,比如说一个渐变按钮,那么 .btn 的 class 是不会包含渐变相关的属性的,而是需要单独抽取出一个渐变的 class,然后让 .btn 去扩展从而得到一个渐变的按钮。

.btn {//结构
    ...
}
.btn.btn-info {//样式
    backgrond: green;
}
//这似乎有点像Bootstrap的味道

就像官方说的那样,一个 Object 包含了四个部分:

  1. HTML ,会有一个到多个的 DOM 节点
  2. CSS , 用来表示上述节点的样式, 这些样式都会以最外面的包裹层 Node 的 class Name 开始
  3. 背景图片、或者其他的一些用来展示的资源组成的组件
  4. Javascript 的事件,行为等。

另一个特点在于,OOCSS 认为 container 和 content 是需要隔离开的(这里的container只是将一块区域包裹起来,并不具有任何特殊的意义)。也就是说,尽量不要去使用依赖于节点结构位置的样式定义。比如这样的就是不允许的:

.video-container .title{
  ...
}

OOCSS 中会建议你直接这样去写:也就是直接去写这个元素。

.title{
  ...
}

2、Block,Element,Modifier(BEM)

BEM是一套严格但合理的命名规范使得你的 class 保持一个较好的可读性和维护性。方便合作开发,别人容易读得懂你的代码,你也容易维护好你的样式。

格式为:

.block{}

.block__element{}

.block--modifier{}

格式大约就是如上所属那样,当然,有一点需要注意,多层 DOM 节点的情况下正确的写法应该是这样的:

<div class="block">
    <div class="block__e1">
       <button class="block__e2"></button>
    </div>
</div>

Stackoverflow 上有个特别好的解释对于 BEM 的说法点这里查看

简单说,就是 html 是一个 DOM树,那么你在写样式的的时候就写成一个 BEM树一一对应就可以了。看例子:

html:

<ul>
  <li>
     <a>
       <span></span>
     </a>
  </li>
</ul>

DOM树中有如下四个节点:

ul
ul>li
ul>li>a
ul>li>a>span

那么对应的我们就可以设计出如下的 BEM class:

<ul class="menu">
  <li class="menu__item">
    <a class="menu__link">
      <span class="menu__text"></span>
    </a>
  </li>
</ul>

3、参考文章

瞎扯扯OOCSS,ACSS,BEM,SMACSS

如何去组织你的CSS代码

标签:写法   tps   解释   好的   直接   控件   依赖   渐变   menu   

原文地址:https://www.cnblogs.com/yuliangbin/p/9474012.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!