资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

怎么在CSS中利用methodologies实现模块化-创新互联

这期内容当中小编将会给大家带来有关怎么在CSS中利用methodologies实现模块化,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:域名与空间、网页空间、营销软件、网站建设、深泽网站维护、网站推广。

一、什么是 CSS methodologies

CSS methodologies,可以理解成 设计模式,也可以理解成 css 规范,市面使用情况如下图:

怎么在CSS中利用methodologies实现模块化

二、常见的 CSS methodologies


1、OOCSS

面向对象的 CSS(Object-Oriented CSS,简称OOCSS ),由 Nicole Sullivan 于 2008 年提出,这基于她在雅虎的工作。

(1)规则

1、不要使用 ID 用 Class

直接使用class来设定样式,这样写不只是可以增加语义,同時也降低css对html的依赖。

2、结构和样式分离

虽然早期 html 和 css 实现了结构和样式的分离,但 css 内部同样存在两种类型的样式:

  • 结构样式(例如长宽、距离)

  • 皮肤样式(例如颜色、阴影)

所以 OOCSS 建议把这两种样式拆开。

比如有三种按钮,白色的/绿色的/红色的,可分别定义为:

class="btn btn-default"

class="btn btn-green"

class="btn btn-red"

如果你真的有很多个具有紫色按钮,则可以创建一个单独的紫色按钮类。这样可以大大减少CSS代码的数量。

3、容器和内容分离

内容绝不应该限制于特定的容器,为了重用,得分离开。

# 错误写法
.header .action {
}
.header .action .login {
}
.header .action .register {
}

# 正确写法
.header{
}
.action{
}
.login {
}
.register {
}

继承选择符是有用的,它可以减少因相同命名引发的样式冲突(常发生于多人协作开发)。但是,我们不应过度使用。

(2)利弊

好处:

  • 模块化,可重用

  • 减少代码重复

  • 提高可拓展性、可维护性、可读性

缺点:

  • 虽减少了深层的嵌套选择器,但是多了更多的类

  • 如果代码中没有大量重复的视觉模式,比如一些小项目,则应用OOCSS可能不切实际

(3)实例

Bootstrap 就是用的 OOCSS。

例如:

html

 
         
            1
            2
            3
        
        
            login
            register
        
    

css:

.header {
}
.menu {
}
.menu-item {
}
.item.active {
}
.action {
}
.btn {
}
.btn-login {
}
.btn-register{
}

2、BEM

BEM - Block Element Modfier(块元素编辑器)。诞生于2009年。

(1)内容

BEM 包括三个:

(2)规则

1、命名规范

在某些公司(如腾讯)的规范里,双中划线被单下划线(_)替代。

例如:.block-name__element--modifier

demo - html:


         
            1
            2
            3
        
        
            login
            register
        
    

demo - less:

.header {
    &__menu {}
    &__menu-item {}
    &__action {}
    &__btn {  
        &--login {}
        &--register {}
    }    
}

2、避免嵌套

BEM 最多只有 B+E+M 三级。

所以请避免.block__el1__el2 的格式,直接改为.block_el2

这里的 block 就很像命名空间了。

(3)利弊

好处:

缺点:

其他:

BEM 命名会使得 Class 类名变长,但经过 gzip 压缩后这个带宽开销可以忽略不计。

BEM是不允许用标签选择器的,哪怕最简单的 li 也得写成 .menu-item。

(4)实践

饿了么的框架elementUI就是BEM的一种,或者你也可以研究网站company.yandex.ru/。

3、SMACSS

SMACSS(Scalable & Modular Architecture CSS ,即 CSS 的可扩展性和模块化架构)。Jonathan Snook 于 2011 年提出,当时他在雅虎工作,为 Yahoo Mail 编写 CSS。

(1)规则

1、Categorizing CSS Rules(CSS 分类规则)

它将 CSS 分为5个不同的类别:

Base 基本规范

例如 CSS Reset 和 CSS Normalize。

Layout 布局规范

例如左右分栏、栅格系统。

Module 模块

例如一个产品列表,一个导航条。可重用。

State 状态规范

例如选中状态。

Theme 样式规范

2、Naming Rules(命名规则)

为类名添加前缀

Base 不需要前缀。而且是用标签而不是 class 和 ID。

例子:


  
  ...

(2)实例

在线 demo:https://codepen.io/savemuse/pen/gWVpvd

4、 Atomic CSS

Atomic CSS 也是雅虎提出的,可以从字面意思理解成原子 CSS

(1)示例

会有专门的 Atomic css 工具,帮助将上面 html 中的 class name 解析成正常的 css。(略)

(2)利弊

好处:将 CSS style 最小元件化,重用性较大化。

坏处:这根本就是在写 inline-style,只是我们用 class name 的方式來表示而已。

(3)总结

这种做法真的很激进。我暂时无法接受。

三、总结

抛开激进的Atomic,我对剩下的 OOCSS / BEM / SMACSS 有如下建议:

他们各自的思想有互补也有冲突,在实际开发中可以有取舍的使用

他们都可以结合 CSS 预处理器(如 less/sass )获得更好的效率

把上文分别介绍他们的好处列举在一起对比汇总,发现他们解决的核心问题就是:模块化

怎么在CSS中利用methodologies实现模块化

上述就是小编为大家分享的怎么在CSS中利用methodologies实现模块化了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注创新互联行业资讯频道。


网页标题:怎么在CSS中利用methodologies实现模块化-创新互联
标题URL:http://cdkjz.cn/article/csgcgj.html
返回首页 了解更多建站资讯
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220