2letterbem 中文文档教程

Question

2 Letter Bem

将你的 css 类压缩到几个字符（可能是 2 个），然后你可以在你的 html 中使用它们。 这是作为 npm 脚本运行的独立包。

Compressing css this way + gzip = negligible results

示例 - bootstrap 4.4.1 css 缩小和压缩：

• bootstrap.min.css.gz -> 23.6KB
• 2 letter bem version -> 22.8KB
• However, this can be used with html, to shave a kilobyte or two. This could be used to obfuscate your work.

输入 css 文件：

.something { ... }
.something__block { ... }
.something__block:hover .that-thing { ... }
.js-action-state something__block.active { ... }

输出 - 创建 2 个文件 css:

.a { ... }
.b { ... }
.b:hover.c { ... }
.js-action-state b.d { ... }

json:

{
"something": "a",
"something__block": "b",
"that-thing": "c",
"active" "d"
}

任何在你的 css 中以 .js 开头的东西都不会被压缩。 您可以指定您不想被触及的类的 whiteList。 它们也不会出现在 json 文件中。 您现在可以将 json 文件用作 html 的字典。

PHP 中的简单示例：

function klass($cssName){
    $output = [];
    $cssNames = explode(' ', $cssInput);
    foreach ($cssNames as $cssName) {
      if (array_key_exists($cssName, $allYourClassNamesReadFromJSON)) {
        $output[] = $allYourClassNamesReadFromJSON[$cssName];
      } else {
        $output[] = $cssName;
      }
    }
    return implode(' ', $output);
}
<div class="klass('something')"></div> renders as <div class="a"></div>

How to use

以 package.json 为例：

{
...
 "config": {
    "2letterbem": {
      "whiteList": [
        ".is-active",
        ".wf-inactive",
      ]
    }
  },
  dependencies: { ... }
  devDependencies: { ... }
  scripts: {
   "2letterbem": "node ./node_modules/2letterbem/2letterbem.js --i ./inputFile.css --o ./outputFile.css --j './jsonMapFile.json"
  }
...

或 package.json 配置中的所有内容

{
  ...
  "config": {
    "2letterbem": {
      "cssPath": "./inputFile.css",
      "jsonSpace": 2,
      "outputCssPath": "./outputFile.css", 
      "outputJsonPath": "./jsonMapFile.json",
      "permutationArgs": {
        "maxSize": 2,
        "recursive": true
      },
      "permutationLetters": "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ",
      "whiteList": [
        ".is-active",
        ".wf-inactive"
      ]
    }
  },
  scripts: {
    "2letterbem": "node ./node_modules/2letterbem/2letterbem.js"
  },
  ...
}