CSS的组件化方案：OOCSS + BEM

kgbook 发布于2019-08-01 17:22 / 2357人阅读

摘要：由于缺少命名空间，所有的都是全局的，所以大团队项目如果没有良好的命名规范，会容易失控。所以尽量避免标签定义样式。全称相对于前种方案，命名比较冗长，但这正是保证类名不会重复的途径，是的核心思想。

CSS由于缺少命名空间，所有的class都是全局的，所以大团队项目如果没有良好的命名规范，会容易失控。

举例实现以下效果：

通过 class + tag

  .pageButtons {
            display: flex;
            justify-content: center;
        }

        .pageButtons button{
            width: 80px;
            height: 30px;
            margin: 5px;
            border-radius: 4px;
            border: none;
            font-size:13px;
            cursor: pointer;
            outline: none;
        }

        .primary-button {
            color: white;
            background-color: rgba(200,0,0,.9);
            transition: background-color 1s,font-weight 1s;
        }

        .primary-button:hover {
            font-weight: 700;
            background-color: rgba(255,0,0,1);
        }

想象下，把此页面（或者做成组件）嵌入到另外一个页面，而它也以button 标签定义了button的样式，会造成非我们期望的button样式。所以尽量避免标签定义样式。还有一个问题是，.primary-button看似是一个普通的类，也有可能在别的地方定义，所以维护会比较困难。

通过 OOCSS + BEM实现

OOCSS就是通过选择符重用CSS类。BEM全称Block-name__element--modifier.

        .pageButtons {
            display: flex;
            justify-content: center;
        }

        .pageButtons__prev,
        .pageButtons__next,
        .pageButtons__next--primary {
            width: 80px;
            height: 30px;
            margin: 5px;
            border-radius: 4px;
            border: none;
            font-size:13px;
            cursor: pointer;
            outline: none;
        }

        .pageButtons__next--primary {
            color: white;
            background-color: rgba(200,0,0,.9);
            transition: background-color 1s,font-weight 1s;
        }

        .pageButtons__next--primary:hover {
            font-weight: 700;
            background-color: rgba(255,0,0,1);
        }

相对于前种方案，BEM命名比较冗长，但这正是保证CSS类名不会重复的途径，是BEM的核心思想。

通过OOSCSS

如果用SASS写：

%button {
  width: 80px;
  height: 30px;
  margin: 5px;
  border-radius: 4px;
  border: none;
  font-size:13px;
  cursor: pointer;
  outline: none;
}

%primaryState {
  color: white;
  background-color: rgba(200,0,0,.9);
  transition: background-color 1s,font-weight 1s;
}

%hoverState {
  font-weight: 700;
  background-color: rgba(255,0,0,1);
}

.pageButtons {
  display: flex;
  justify-content: center;

  &__prev,
  &__next,
  &__next--primary {
    @extend %button;
  }

  &__next--primary {
    @extend %primaryState;
  }

  &__next--primary:hover {
    @extend %hoverState;
  }
}

这里稍提下%placeHolder 和 @mixin，如果不用传人参数，用%placeHoder,这样可以以选择符重用类，相对于@mixin复制代码，减少了代码体积。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51124.html

CSS的组件化方案：OOCSS + BEM

摘要：由于缺少命名空间，所有的都是全局的，所以大团队项目如果没有良好的命名规范，会容易失控。所以尽量避免标签定义样式。全称相对于前种方案，命名比较冗长，但这正是保证类名不会重复的途径，是的核心思想。 CSS由于缺少命名空间，所有的class都是全局的，所以大团队项目如果没有良好的命名规范，会容易失控。举例实现以下效果：showImg(https://segmentfault.com/img...

GHOST_349178 2019-08-29 13:06 评论0 收藏0
CSS方法论（一）

摘要：由于年提出，这基于她在雅虎的工作。但是这很难做到解决的问题样式全局性造成的样式冲突问题多人协作的命名问题解决层叠问题，使的优先级保持相对扁平的模块化，使更具有复用的能力于年由提出，当时他在雅虎工作。编写CSS会遇到什么问题？其实CSS很好写，只要知道css语法，你就可以写出来，通过各种学习，你也可以做出一个很美丽的页面。对能熟练编写网页的人来说，可以很简单的将设计图变成网页。但是在...

haoguo 2019-08-29 17:01 评论0 收藏0
[译]聊一聊CSS方法论

摘要：这个方法论在内容和容器之间有着明显的区分。这是通过把命名为表示其角色的类名。通过使用这种扁平的命名方式避免了多后代的选择器。原文链接：A Look at Some CSS methodologies CSS在大型，复杂，快速迭代的系统中难以管理的程度是出了名的。其中一个原因是CSS缺少内置的作用域管理机制。在CSS中，所有的一切都是全局的，这意味着任何你所做的改变都有可能层叠或者改...

CoffeX 2019-08-28 18:20 评论0 收藏0
[译]聊一聊CSS方法论

摘要：这个方法论在内容和容器之间有着明显的区分。这是通过把命名为表示其角色的类名。通过使用这种扁平的命名方式避免了多后代的选择器。原文链接：A Look at Some CSS methodologies CSS在大型，复杂，快速迭代的系统中难以管理的程度是出了名的。其中一个原因是CSS缺少内置的作用域管理机制。在CSS中，所有的一切都是全局的，这意味着任何你所做的改变都有可能层叠或者改...

cfanr 2019-08-01 14:53 评论0 收藏0
用更合理的方式写 CSS

摘要：和出于以下原因，我们鼓励使用和的某种组合可以帮助我们理清和之间清晰且严谨的关系。可以帮助我们创建出可扩展的样式表。参考资料的的，也就是，是一种用于和类名的命名约定。 OOCSS 和 BEM 出于以下原因，我们鼓励使用 OOCSS 和 BEM 的某种组合：可以帮助我们理清 CSS 和 HTML 之间清晰且严谨的关系。可以帮助我们创建出可重用、易装配的组件。可以减少嵌套，降低特定性...

CntChen 2019-08-30 15:52 评论0 收藏0