阅读 327

前端架构设计之 HTML

HTML

如果没有 HTML,那就没有 Web。HTML 做的不好,你将要写出很多不必要的 CSS 和 Javascript 来弥补。当然,HTML 写的好,就能写出更具扩展性和可维护性的 CSS 和 Javascript。请重视 HTML。由于历史原因,前后后端都写过 HTML,于是就细分出:程序式和静态时。

程序式标记

自动化程度 100%,可控程度 0% 通常这类代码在前端团队参与之前,后端人员写出一堆标记和 CSS 类名,可能来自于与不同模板。后期后端开发人员又着手其他任务,没有时间来维护,前端团队就得来接手。

<div id="header" class="chearfix">
    <div id="header-inner" class="container-12 chearfix">
        <div id="nav">
            <ul class="menu">
                <li class="menu-item"> 
                    <a href="http://ruizhengyun.cn/">Pr's blog</a>
                    <ul class="sub-menu">
                        <li class="sub-menu-item">
                            <a href="http://ruizhengyun.cn/tutorial">糖衣炮弹</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>
复制代码

一顿 div 乱轰,功能上没有任何问题,然而文档毫无语义化可言。

静态式标记

自动化程度 0%,可控程度 100%

为了简洁,“语义化”标记是首选,应用样式即视觉外观是依赖 HTML5 元素名称和层级关系,而不是考程序式标记用 Css 类名来维护。

<header>
    <section>
        <nav>
            <ul>
                <li> 
                    <a href="http://ruizhengyun.cn/">Pr's blog</a>
                    <ul>
                        <li>
                            <a href="http://ruizhengyun.cn/tutorial">糖衣炮弹</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </nav>
    </section>
</header>
复制代码

此时,css 可能会长这样

header > section > nav > div > ul > li > a {}
header > section > nav > div > ul > li > ul > li > a {}
复制代码

文档语义化是解决了,功能上也没问题,解决了程序式标记的问题,但在 css 的处理上过于复杂。

模块化标记,即平衡可控来标记

自动化程度 100%,可控程度 100%

<header class="header">
    <section class="header__inner">
        <nav class="nav">
            <ul class="nav__list">
                <li class="nav__item">
                    <a class="nav__link" href="http://ruizhengyun.cn/">Pr's blog</a>
                    <ul class="nav__list--sub">
                        <li class="nav__item--sub">
                            <a class="nav__link--sub" href="http://ruizhengyun.cn/tutorial">糖衣炮弹</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </nav>
    </section>
</header>
复制代码

这段一看就是将上面两者结合一下,

  • css 类名上有点乱乱的,有 __(双下划线)和 --(双横杠)。
  • html 代码量上相对静态式标记冗余了

观点

  • 代码确实冗余,解决了静态式标记 css 编写的复杂度
  • 解决了程序式标记缺少语义化问题

对于 css 书写风格就涉及到 CSS 模块化了,上面采用的是 BEM 命名规则

CSS 模块化

OOCSS

面向对象的 CSS,Object-Oriented CSS,我们熟悉的 bootstrap 就是这样的。以卡片组件为例

<section class="card simple open">
    <header class="card-header">
        <h2 class="card-title">标题</h2>
        <span class="card-status">开启</span>
    </header>
    <div class="card-body">
        内容
    </div>
</section>
复制代码
  • 分离结构和外观,比如 CSS 类名 card 后面使用了 simple 默认卡面是直角,那也可以加上 complex 圆角,加上 shadow 阴影等
  • 分离容器和内容,比如 h2 上还是应用了 CSS 类名 card-title

SMACSS

模块化架构的可扩展 CSS,Scalable and Modular Architecture for CSS,还是以卡片组件为例

<section class="card card-simple is-active">
    <header class="card-header">
        <h2 class="card-title">标题</h2>
        <span class="card-status">开启</span>
    </header>
    <div class="card-body">
        内容
    </div>
</section>
复制代码

这个咋一看与 OOCSS 差不多,但是还是有不同之处的,容我道来,SMACSS 把样式划分为5 个具体类别

  • 基础
  • 布局
  • 模块
  • 状态
  • 主题

例子中,

  • 模块 card、card-title、card-body
  • 子模块 card-simple,OOCSS 是皮肤 simple
  • 状态 is-active 前面加了前缀 is-

antd > card 就是这种做法,不过也有其自己的特色,antd 卡片地址

BEM

块元素修饰符,Block Element Modifier,一种 CSS 类名命名规则。还是以卡片组件为例

<section class="card card--simple card--active">
    <header class="card__header">
        <h2 class="card__title">标题</h2>
        <span class="card__status">开启</span>
    </header>
    <div class="card__body">
        内容
    </div>
</section>
复制代码
  • 块名,组件名称,card
  • 元素,元素在块里的名称,前面加双下划线,card__title
  • 修饰符,与块和元素相关的修饰符,前面加双横杠,card-simple card--active

文末,不需要拘泥于哪一种,只要适合项目产品的场景,可以混合使用,方便团队持续开发就好。

关注下面的标签,发现更多相似文章
评论