语言

HTML

历史

超文本标记语言（第一版）——在1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准） HTML 2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时 HTML 3.2——1997年1月14日，W3C推荐标准 HTML 4.0——1997年12月18日，W3C推荐标准 HTML 4.01（微小改进）——1999年12月24日，W3C推荐标准 HTML 5——2014年10月28日，W3C推荐标准

问题

从html诞生开始，浏览器一直没有对HTML模块化的支持，从2016年起，w3c开始正式研究这个问题。在以往的开发过程中，一直采用两种方式去模块化引入html：

1.后端渲染的方式。以PHP的Smarty为例：

<body>
  <h2>这个是模板文件输出的</h2>
  <hr/>
  子输出一：{block name='first'}{/block}
  <hr/>
  <hr/>
  子输出二：{block name='second'}{/block}
  <hr/>
  <h2>这个是模板文件输出的</h2>
</body>

2.前端通过script的方式，使用JS去解析里面内容：

<script id="tpl_res_ques" type="text/html">
  <div class="q_re que_{{qid}}">
    <div class="que_{{qid}}">
      <div class="rep_person">
        <span class="{{role}}">{{if role === "spadmin"}}[{{roleAlias.spadmin}}回答]:{{else if role === "admin"}}[{{roleAlias.admin}}回答]:{{else role === "user"}}[roleAlias.user]:{{/if}}</span>
        <span class="rep_msg">{{content}}</span>
      </div>
    </div>
  </div>
</script>

未来

未来所期待的方式有两种：

1.html中直接引入html模块。

<script type="module" url="a.html">

2.在js中把html作为文本/DOM对象引入。

import html from 'a.html';

CSS

历史

问题

随着现代网页应用复杂程度越来越高，css代码也愈加复杂。以淘宝网首页为例，在页面中嵌入的css代码解压缩后有4820行。这意味着对于一个完整的网站来说，全部的css代码量加起来可能是几万甚至10万行以上。这个规模下，开发者希望能够有效地复用代码和防止样式冲突。可惜的是css并没有一个完善的模块化管理的方式，所有的css都处于global作用域下，开发者只能通过编写不同的selector名称去划分作用域。目前解决的方式主要有以下三种：

规定清晰的class名称规范。所有开发人员按照此规范进行开发。

.hide{} /* 全局级 */ 
.page-index{} /* 页面级 */
.com-modal-title{} /* 通用组件级 */
.page-index .double-eleven-logo{} /* 页面 + 业务 */

这个办法的另外一个变种是：基于以上的规则，通过less sass等css预编译器去书写。

.page-index{
    .header-title{}
    .footer-title{}
}

使用各类框架时，通过自动编译的方式实现模块化。以vue为例子，在style标签上加入scoped属性。编译前：

<template>
  <div class="button-warp">
    <button class="button">text</button>
  </div>
</template>
<style scoped>
.button-warp{
  display:inline-block;
}
.button{
  padding: 5px 10px;
  font-size: 12px;
  border-radus: 2px;
}
</style>

编译后：

<div data-v-2311c06a class="button-warp">
  <button data-v-2311c06a class="button">text</button>
</div>

<style>
.button-warp[data-v-2311c06a]{
  display:inline-block;
}
.button[data-v-2311c06a]{
  padding: 5px 10px;
  font-size: 12px;
  border-radus: 2px;
}
</style>

实际上这个功能还是利用编译工具，修改了css的selector来达到作用域的作用。

使用BEM (Block Element Modifier)。本质上还是通过约束每一个css选择器的名称来控制作用域。

[block]__[element]--[modifier] {
  padding: 10px 20px;
  font-weight: bold;
  font-size: 2rem;
}

未来

css语言也要向更能够工程化的方向去发展。

目前已有的两个技术：

css modules，将css样式转化为js对象，在js文件中引入。目前常见于react项目。

App.css

.title {
  color: red;
}

App.jsx

import React from 'react';
import style from './App.css';
export default () => {
  return (
    <h1 className={style.title}>
      Hello World
    </h1>
  );
};

编译之后:

<h1 class="_3zyde4l1yATCOkgn-DBWEL">
  Hello World
</h1>

._3zyde4l1yATCOkgn-DBWEL {
  color: red;
}

css变量。这种方式能够解决的问题是，将大量的重复样式设置为变量，然后多处引用，可以大量减少css的属性编写量。同时在某个selector中书写变量的时候，此变量是带有所在selector作用域的。不过，此技术的缺点在于并没有解决cssselector过多过长的问题，我们可以假想一下如果selector的名称也都可以使用变量的话，岂不是美滋滋。

html {
  --main-bg-color: brown;
  --main-title-mixin:{
    font-size: 16px;
    color: #333;
  }
}

.bg{
  background-color: var(--main-bg-color);
  @apply --main-title-mixin;
}