原文地址

原创翻译，有不当的地方欢迎指出。转载请指明出处。谢谢！

我们作为开发人员面临的一个令人生畏的问题是“我将如何在项目中结构化一些东西？”作为一个框架，SUIT CSS提供了一个架构的实现，其他人可以使用它来作为应用开发的基础。

把它看成是解决混乱结构的最佳方式，减少css在执行往往缺少设计原则时的恐惧和无助（相比于其他像JavaScript的语言拥有的执行规则和抛出错误）。

SUIT作者基于组件UI开发提供了一个的可靠的，可测试的样式方法论。 CSS包和构建工具的集合作为独立的模块供外部使用。

SUIT的核心是通过一组命名约定设计可复用组件的样式。在将组件视为应用程序的构建块的系统中，这些优势最为明显。命名约定有助于组件CSS的局部化和式组件的渲染结果更可预测。

SUIT CSS是一个专注于改进基于组件的开发的CSS创作体验的方法论。 一个基于组件开发的系统允许实现将松散耦合的组合和独立的单元合成明确定义的复合对象。组件被封装，但能够通过接口/事件对其进行操作

~ SUIT CSS Documentation

---

SUIT和NPM一起使用效果最佳。但是你如果使用Bower，那么你可能需要使用一个构建系统，要求你列出所有需要合并的CSS文件（指向每个文件在lib目录中的安装路径），如果您希望它们被检查，将单个文件传递到一致性工具中，并最终将合并的bundle传递到预处理器。强烈建议不要使用Bower.

通过NPM安装SUIT，你可以在你的项目根目录下做以下操作来局部安装SUIT

 `npm install suitcss --save && npm install suitcss-preprocessor --save`

在你的终端中输入以上命令

既然我们已经安装好了suitcss，我们需要使用npm脚本创建一个构建操作，在你的package.json中的npm脚本中添加suitcss命令。

 "scripts": {
  "build": "npm run setup && npm run preprocess",
  "preprocess": "suitcss index.css build/build.css", // We could also install suitcss globally. Your choice.
  "setup": "npm install && mkdir -p build"
}

package.json中的npm构建脚本块

现在创建一个index.css的入口文件并导入suitcss包。在@import语句后面添加自定义媒体查询的值，如果不这样，终端会给出警告（它只是意味着使用媒体查询变量的默认值也是可以的）。

 @import "suitcss";
/* media query vars go here */
/* pass any :root vars here */

在index.css中导入任何SUIT模块

现在我们可以在项目根目录可以执行npm run build命令，这个命令会在你的项目下生成一个build/build.css文件。

对于对NPM魔法的好奇，一个名为Rework-npm的工具可以帮助你处理从node_modules目录导入模块。我们在index.css中导入了suitcss这意味着我们导入了suitcss中的所有模块，但是我们也可以像下面这样安装单独的模块（前提是他们已经通过npm安装了）。

 @import "suitcss-base";
@import "suitcss-utils";

index.css 示例演示 @import单独的SUIT模块

建议按需安装你所需要的单独包。然而，如果你喜欢像我之前演示的那样，你也可以一次性安装所有的CSS包。

这里有一个index.css文件帮助你入门。这个文件将项目的每个模块作为单独导入，因此您可以选择想要的模块。你可以根据需要随意自定义。

 @import "suitcss-base";

@import "suitcss-utils-align";
@import "suitcss-utils-display";
@import "suitcss-utils-layout";
@import "suitcss-utils-link";
@import "suitcss-utils-offset";
@import "suitcss-utils-position";
@import "suitcss-utils-size";
@import "suitcss-utils-text";

@import "suitcss-components-arrange";
@import "suitcss-components-button";
@import "suitcss-components-flex-embed";
@import "suitcss-components-grid";

@custom-media --sm-viewport (min-width: 320px);
@custom-media --md-viewport (min-width: 640px);
@custom-media --lg-viewport (min-width: 960px);

:root {
  --base-color: inherit;
  --base-font: 16px sans-serif;
  --base-link-color: #069;
  --base-link-color-hover: #069;

  --Arrange-gutter-size: 10px;

  --Button-border-width: 1px;
  --Button-border-color: currentcolor;
  --Button-color: inherit;
  --Button-font: inherit;
  --Button-padding: 0.4em 0.75em;
  --Button-disabled-opacity: 0.6;

  --Grid-font-size: 1rem;
  --Grid-gutter-size: 10px;
}

html {
  font-size: calc(var(--base-font) * 2);
  color: var(--base-color);
}

在 GitHub Gist上查看源代码_

---

每个SUIT模块都有自己的结构和类名，以帮助您进一步指导您构建系统。请务必参阅每个SUIT模块的有关类名和标记模式的文档。

对于Sass，LESS，Stylus用户，你可能早就发现本文没有提到上述语言的任何一种，但作为css开发者，您可以在工作时采用这样的原则和命名约定。

SUIT是否适合你？让我们知道。