应用CSS methodologies去完成控制模块化的方式示例

日期:2021-02-28 类型:科技新闻 

关键词:在线网页制作,建网页,个人简介网页制作,简单网页,建立网页

1、甚么是 CSS methodologies

CSS methodologies,能够了解成 设计方案方式,还可以了解成 css 标准,市面上应用状况以下图:

上图来源于:https://2019.stateofcss.com/technologies/

你将会在平常开发设计中其实不会专业花時间去留意和掌握 CSS methodologies,但伴随着你工作经验的累积,你将会会自身思索,或阅读文章他人的编码、参照在网上完善的架构,这里边都或多或少的包含了1些 css methodologies 的闪亮点。而下面要详细介绍的几种流行的 css methodologies,则能够帮你保证很好的总结和整理。

2、普遍的 CSS methodologies

1、OOCSS

朝向目标的 CSS(Object-Oriented CSS,简称 OOCSS ),由 Nicole Sullivan 于 2008 年提出,这根据她在yahoo的工作中。

(1)标准

1、不必应用 ID 用 Class

立即应用class来设置款式,这样写不只是能够提升词义,同時也减少css对html的依靠。

2、构造和款式分离出来

尽管初期 html 和 css 完成了断构和款式的分离出来,但 css 內部一样存在两类型型的款式:

  • 构造款式(比如长宽、间距)
  • 皮肤款式(比如色调、黑影)

因此 OOCSS 提议把这两种款式拆卸。

例如有3种按钮,白色的/翠绿色的/鲜红色的,可各自界定为:

class="btn btn-default"

class="btn btn-green"

class="btn btn-red"

假如你真的有许多个具备紫色按钮,则能够建立1个独立的紫色按钮类。这样能够大大降低CSS编码的数量。

3、器皿和內容分离出来

內容决不应当限定于特殊的器皿,以便重用,得分离出来开。

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

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

承继挑选符是有效的,它能够降低因同样取名引起的款式矛盾(常产生于多人合作开发设计)。可是,大家不可过多应用。

(2)利与弊

益处:

  • 控制模块化,可重用
  • 降低编码反复
  • 提升可扩展性、可维护保养性、可读性

缺陷:

  • 虽降低了深层次的嵌套循环挑选器,可是多了更多的类
  • 假如编码中沒有很多反复的视觉效果方式,例如1些小新项目,则运用OOCSS将会脱离实际

(3)案例

Bootstrap 便是用的 OOCSS。

比如:

html

 <div class='header'>
        <ul class='menu'> 
            <li class='menu-item active'>1</li>
            <li class='menu-item'>2</li>
            <li class='menu-item'>3</li>
        </ul>
        <div class="action">
            <button class="btn btn-login">login</button>
            <button class="btn btn-register">register</button>
        </div>
    </div> 

css:

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

2、BEM

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

(1)內容

BEM 包含3个:

  • Block - 块,如 header
  • Element - 子元素,如 块menu 下的 item
  • Modfier - 情况,如.current、.active

(2)标准

1、取名标准

  • -中划线 :仅做为连标识符应用,表明某个块或某个子元素的多单词之间的联接记号。
  • __ 双下划线:用来联接块和块的子元素。
  • -- 双中划线:用来叙述1个块或块的子元素的1种情况。

在一些企业(如腾迅)的标准里,双中划线被单下划线(_)取代。

比如:.block-name__element--modifier

demo - html:

    <div class='header'>
        <ul class='header__menu'> 
            <li class='header__menu-item--active'>1</li>
            <li class='header__menu-item'>2</li>
            <li class='header__menu-item'>3</li>
        </ul>
        <div class="header__action">
            <button class="header__btn--login">login</button>
            <button class="header__btn--register">register</button>
        </div>
    </div> 

demo - less:

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

2、防止嵌套循环

BEM 数最多仅有 B+E+M 3级。

因此请防止 .block__el1__el2 的文件格式,立即改成 .block_el2

这里的 block 就很像取名室内空间了。

(3)利与弊

益处:

  • 等级关联1目了然,具备可读性
  • 不必须借助等级挑选器来限制管束功效域,可防止跨组件的款式污染。

缺陷:

  • 取名方法长而不好看,撰写麻烦(能够根据 less/sass 来简化撰写)
  • 在较小的组件中,BEM 文件格式将会显得鸡肋。但针对公共性的、全局性性的控制模块款式界定,還是强烈推荐应用 BEM 文件格式。(特别对外公布的公共性组件)

别的:

BEM 取名会使得 Class 类名变长,但历经 gzip 缩小后这个带宽花销能够忽视不计。

BEM是不容许用标识挑选器的,哪怕最简易的 li 也得写成 .menu-item。

(4)实践活动

饿了么的架构elementUI便是BEM的1种,或你还可以科学研究网站company.yandex.ru/。

3、SMACSS

SMACSS(Scalable & Modular Architecture CSS ,即 CSS 的可拓展性和控制模块化构架)。Jonathan Snook 于 2011 年提出,那时候他在yahoo工作中,为 Yahoo Mail 撰写 CSS。

(1)标准

1、Categorizing CSS Rules(CSS 归类标准)

它将 CSS 分成5个不一样的种别:

Base 基础标准

比如 CSS Reset 和 CSS Normalize。

Layout 合理布局标准

比如上下分栏、栅格数据系统软件。

Module 控制模块

比如1个商品目录,1个导航栏条。可重用。

State 情况标准

比如选定情况。

Theme 款式标准

2、Naming Rules(取名标准)

为类名加上前缀

Base 不必须前缀。并且是用标识而并不是 class 和 ID。

  • l- 用作 Layout 的前缀:l-inline
  • m- 用作 Module 的前缀:m-callout。但还可以无需前缀。
  • is- 用作 State 的前缀:is-collapsed
  • Theme 1般会新建个 theme.css,用以前存在的类名。假如想用独立的类名,能用 theme- 前缀。

事例:

<div class="l-box m-profile m-profile--is-pro-user">
  <img class="m-avatar m-profile__image" />
  <p class="m-profile__bio">...</p>
</div>

(2)案例

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

4、 Atomic CSS

Atomic CSS 也是yahoo提出的,能够从字面意思了解成分子 CSS

(1)示例

<div className="P(10px) M(20%) Pos(f) Start(50%) Bgc(#fff)" />

会有专业的 Atomic css 专用工具,协助将上面 html 中的 class name 分析成一切正常的 css。(略)

(2)利与弊

益处:将 CSS style 最少元件化,重用性最大化。

弊端:这压根便是在写 inline-style,只是大家用 class name 的方法來表明罢了。

(3)总结

这类做法真的很激进。我临时没法接纳。

3、总结

抛开激进的Atomic,我对剩余的 OOCSS / BEM / SMACSS 有以下提议:

她们各有的观念有互补也是有矛盾,在具体开发设计中能够有选择的应用

她们都可以以融合 CSS 预解决器(如 less/sass )得到更好的高效率

把上文各自详细介绍她们的益处例举在1起比照汇总,发现她们处理的关键难题便是:控制模块化
 

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。