使用inuit.css揉鼻子

inuit.css是一个强大的，可扩展的，基于Sass的BEM，OOCSS框架。本文是对inuit.css的简要介绍。如何构建，谁应该使用它以及为什么。

嘿，我是Harry ，最近重写CSS框架inuit.css的创建者。希望本文可以作为inuit.css是什么的简要介绍，为何与众不同以及如何立即开始使用它……

另一个CSS框架诞生了

首先，我知道您在想什么。另一个CSS框架？好吧，简短的答案是肯定的。长答案是“是的，但是有一个理由……”

CSS框架目前是10便士，许多人定期发布关于CSS框架的内容。大多数这些框架的问题在于它们的观点很自以为是。 CSS是一种样式语言，因此任何CSS框架都固有地处理外观和外观。但是，inuit.css没有。

如果您是需要其他人来为您处理设计的开发人员，那么做出很多设计决策CSS框架会很棒，但是如果您是需要CSS的设计师，那该怎么办？使用框架意味着您要么不得不忍受别人的设计决策和意见，要么就开始删除很多代码。或两者！别人的设计可能完全不适合您的项目，这使其几乎毫无意义。这远非理想，我们需要一个样式为零CSS框架。一个繁重的工作。

inuit.css是一个由功能强大的少量免费设计对象和抽象组成的集合，它们构成了任何网站的框架，然后您可以将设计放在其顶部。 inuit.css以OOCSS方式工作，这意味着您可以将所有内容分解为结构和外观。 inuit.css负责结构，您可以在自己的顶部涂抹化妆品！

inuit.css还有一个充满变量的文件，该文件将设置整个项目的印刷比例。它们完全取决于您，并且将用于围绕您选择的值构建大量组件。

inuit.css消除了很多样式上的麻烦，但是却使您完全可以控制样式本身。

那Bootstrap呢？

当然，CSS框架市场中任何人的主要竞争对手是Twitter的Bootstrap 。如果您需要处理设计方面的东西，Bootstrap非常有用。它的设置非常Swift，您可以将各种预先设计的组件随意放入项目中。非常适合需要快速将前端放在一起的设计挑战型开发人员，但对有自己的化妆品想法但需要一些CSS技巧的帮助者的设计师毫无用处。

如果您需要设计或速成的现成解决方案，请使用Boostrap！如果您需要创作自由，但需要可扩展，无设计，可扩展且功能强大的帮助程序，则可以考虑使用inuit.css…

inuit.css的原理

inuit.css是为各种规模的网站构建的微型框架；从简单的一页传机，到需要不断发展的庞大的内容管理巨兽。

inuit.css实际上非常适合大型网站和大型团队，并且它基于某些原则来辅助这种开发方式。

OOCSS

首先，inuit.css是一个OOCSS框架。我是OO思维方式的坚定支持者。我写的和说关于OOCSS了很多。 OOCSS是一种处理较大版本的绝佳方法。基于功能的代码重用，抽象出常见/重复的设计模式，DRY出代码，保持代码高效和可移植性。所有这些想法都烤成其核心inuit.css，框架基本上是一个有用的对象和抽象，如库的导航抽象，媒体对象，在岛上对象和多很多。

分离结构和外观的想法正是使inuit.css非常适合涉及一个或多个设计师的项目。 inuit.css提供了免设计的结构设计模式，设计团队对其进行了全面的设计。

干性，效率和抽象性的思想正是inuit.css非常适合大型网站的原因。 CSS保持苗条，抽象证明更有用，构建更有效；这些确实对大型项目有帮助。

SMACSS

inuit.css以SMACSS风格构建。它不那么精细或完整（因为inuit.css缺少模块，SMACSS 不一定处理抽象和OOCSS），但是它具有一些共同的原则……

inuit.css非常重视按特定顺序编写CSS的想法。在项目上重新定义或撤消自身的代码通常是个坏消息，因此以避免这种情况的方式构造CSS至关重要，尤其是在较大的版本中。 inuit.css的文件结构意味着每个规则集只会添加到以前的规则集中，而不会撤销它们。

首先，我们从基本的重置/重启开始； inuit.css重置边距和填充，但还定义了一些有用的跨浏览器默认值。这是零地面，您的出发点，绝对是最基本的。

接下来，inuit.css导入未分类的元素，例如标题（ h1 – h6 ）之类的东西，它们被设置为您在变量文件中定义的垂直节奏…这些使您可以使用所有样式都简单的原始HTML元素根据您选择的变量。

之后，我们添加对象和抽象……这些是扩展HTML元素（使用类）并进行繁重工作的东西。这些对象和抽象都与元素无关，因此几乎可以应用于任何对象。这使它们具有难以置信的便携性，可重用性，并且最重要的是非常有用！

一旦开始将inuit.css扩展为可以在自己的项目上使用，接下来要导入的内容就是组件或模块。这些都是由对象和抽象及其相关扩展构建而成的（例如，将媒体对象转换为用户个人资料图像和生物）。

最后，inuit.css引入所有帮助程序类和“样式王牌”。这些是您的网格系统的宽度和推/拉类，您的品牌颜色和外观等有用的类，甚至是开发的调试模式。

边界元

BEM是Yandex的开发人员梦dream以求的功能强大的前端方法。简而言之，BEM是命名CSS类的一种方法，以使它们更加严格，清晰和强大。 inuit.css使用BEM方法和基于Nicolas Gallagher的工作的命名约定。

BEM代表块，元素， 修饰符 。

块就像一个组件，元素是朝着整体构建块的方向，修饰符是块的变体，例如：

.comment{} /* Block */
.comment__body{} /* Element */
.comment--guest{} /* Modifier */

在这里，我们有一个.comment块，其中可以包含一个名为.comment__body的元素。我们还可以看到，有一个.comment的变体，称为.comment--guest 。仅从类中，我们就可以清除每件事的作用以及它们之间的关系。 .comment__body 必须居住在.comment内部，而.comment--guest 必须是.comment的变体。

__ ， --表示法告诉我们有关某个对象的很多信息。这在较大的团队中特别有用，因为它有助于传达应如何，在何处以及何时使用课程。

BEM如何工作的一个很好的类比可能是：

.person{}
.person--woman{}
.person__hand{}
.person__hand--left{}
.person__hand--right{}

在这里，我们可以看到我们描述的基本对象是一个人，而另一个类型的人可能是一个女人。我们还可以看到人们有双手。这些是人的子部分，而这些人又有不同的变化，例如左右。

萨斯

使用Sass的原因有很多，主要是为了：

我们可以拆分文件，这意味着您可以在需要时调用对象和抽象。这意味着您的代码将保持苗条，仅在需要时使用。
我们可以使用允许inuit.css围绕您自己确定的值设置整个印刷比例和垂直节奏的变量。
由于在预编译的源代码中物理上较少，因此代码更易于维护 。
我们可以尽量减少CSS ，考虑到inuit.css包含多少注释，这非常重要！

将inuit.css移到预处理器上并非易事，但我很高兴自己做出了这一决定。事实证明，将OOCSS与Sass结合使用非常有用，并且使用变量来设置您的自定义项目意味着没有两个inuit.css构建看起来是相同的。

入门

在inuit.css上设置项目再简单不过了。假设您的项目具有非常基本的结构，如下所示：

+ css/
+ img/
+ index.html

然后，第一步是将inuit.css进入该CSS目录。有两种方法可以执行此操作：

删除CSS目录，将cd放入项目目录，并使用Git克隆： git clone https://github.com/csswizardry/inuit.css.git css && cd css/ && rm -rf .git/ && cd ../ 。这基本上是说“将inuit.css项目克隆到一个名为css的目录中，然后进入css/并从inuit.css文件中删除Git版本，然后返回该项目目录”。
下载最新的inuit.css zip并将其解压缩到CSS目录中。

完成此操作后，您的项目应如下所示：

+ index.html
+ css/
+ inuit.css/
+ _vars.scss
+ README.md
+ watch.sh
+ your-project.scss
+ img/

首先，您可以完全删除README.md 。接下来，将your-project.scss重命名为style.scss ，例如style.scss 。

注意：如果您使用CodeKit或其他接口来编译Sass，请跳到本教程的结尾，我们将以这种方式快速了解如何设置inuit.css项目。

现在，您需要打开watch.sh ，在其中应找到以下内容：

#!/bin/sh
# Change all instances of ‘your-project’ to whatever you have named your
# project’s stylesheet, `cd` to the directory in which this file lives and
# simply run `sh watch.sh`.
# No minification
#sass --watch your-project.scss:your-project.css --style expanded
sass --watch your-project.scss:your-project.min.css --style compressed
exit 0

在这里，您需要将your-project.scss每个实例更改为您选择的名称。这个小文件减轻了从命令行查看Sass文件的麻烦。

现在开始观看项目文件，您只需要打开一个Terminal窗口，将其cd转到项目CSS目录，然后只需运行sh watch.sh 。瞧，您的项目现已在inuit.css上设置。

变数

如前所述，inuit.css附带了一堆变量，可以完成很多工作，如果打开_vars.scss ，则应该看到它们全部……

$debug-mode对于开发中的项目很方便；这将调用inuit.css附带的调试插件，并在浏览器中直观地标记任何可能无法访问或麻烦的代码。

$base-font-size和$base-line-height可以自我解释，但是非常重要。仅给出这两项信息，inuit.css就可以开始设置整个垂直节奏（有关更多信息，请参见_mixins.scss的font-size() mixin）。

其余变量几乎只是标题的字体大小。这些以及您的$base-font-size和$base-line-height变量一起构成了您的垂直节奏。尝试更改这些变量，看看会发生什么！

最后一件事…

下一步是我发现非常有用的步骤；打开inuit.scss ，您将找到一个巨大的目录和一长串的导入部分。优良作法是立即注释掉所有对象和抽象，并根据需要取消注释。这意味着您必须在需要它们时有意调用它们，并且不必捆绑大量未使用CSS。

在观察文件，设置变量和注释掉未使用的对象之后，您都可以在inuit.css上进行设置…

在没有命令行的情况下工作

您很有可能不直接使用命令行，在这种情况下，您可以使用许多可用于编译Sass的应用程序之一。 CodeKit就是这样一个示例，并且（就我们在此需要的而言）在任何运行平台上的行为都与任何其他编译器相似。

因此，然后，要设置一个inuit.css项目，您首先需要从GitHub存储库中获取源文件：

解压缩文件后，将它们组织到熟悉的项目布局中，例如：

如您所见，我已经将inuit源文件夹的内容扔到了css文件夹中。我还摆脱了README.md和watch.sh文件。

接下来，打开您的编译器（在这种情况下为CodeKit），并指示其监视您的项目文件夹。在大多数OS X编译器中，这只是将项目文件夹拖到应用程序窗口中的一种情况。如下所示，CodeKit现在正在监视我的inuit.css-master文件夹，并突出显示了将直接编译的.scss文件。任何带有下划线的文件都不会生成自己的.css文件，尽管可以将其导入其他文件。

在这种情况下，我没有重命名任何内容，但是您会看到your-project.scss被设置为编译成其.css同名文件。我现在需要做的只是将css文件挂接到我的index.html：

<!DOCTYPE html>
<html>
<head>
<title>My very own inuit project</title>
<link href="css/your-project.css" rel="stylesheet">
</head>
<body>
<p>Tunngahugit (welcome, in Inuit)</p>
</body>
</html>

每当我将项目文件保存在代码编辑器中时，CodeKit都会为我重新编译项目并即时重新加载浏览器窗口。

扩展inuit.css

扩展inuit.css是我们可以在本教程的第二部分中介绍的内容，但是到目前为止，您所需要知道的就是它就像your-project.scss告诉您的那样简单：

/**
* She’s all yours, cap’n... Begin importing your stuff here.
*/

有用的东西

从GitHub下载inuitcss.com
Twitter上的Inuit.css @inuitcss
通过inuit.css jsFiddle帐户的文档
有关SMACSS的更多信息
有关OOCSS的更多信息
有关BEM的更多信息
我认为现在已经足够首字母缩写词了。

翻译自: https://webdesign.tutsplus.com/articles/rubbing-noses-with-inuitcss--webdesign-9523