开始编写CSS

2022-09-24 17:43:21

本文由大漠根据Krasimir Tsonev的《Starting to Write CSS》所译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://davidwalsh.name/starting-css，以及作者相关信息

——作者：Krasimir Tsonev

——译者：大漠

你不要觉得CSS没什么重要可言？最近几年他成为一个热门的话题，很多人都在讨论他。CSS并不是一个简单的事情，前端开发者可以使用他将页面制作的更佳漂亮。看得更远一些，我们更关心的是网站的性能以及如何制作出更好的网站。在本文中，我想分享我最近几个月的学到的有关于CSS编码的知识。作为一个程序员，我真正感兴趣的事情是框架（Architectural）部分。我觉得写CSS应该需要去改变，为此我深挖了很多知识。我搜索了好的程序、工作流和原则。这篇文章将带领大家和CSS一起旅行，很多人都说写CSS并不是编程，我就不同意，我说写CSS同样是有趣的，富有挑战性的。

CSS预处理器

让我们一起面对吧，在世界上写CSS并不是一件可笑的事情。CSS预处理器看起来就像CSS，但他更像一个魔术师一样，使用一些魔法会产生有效的CSS代码。这让你的样多和浏览器之间新增加了一层，这样不是更加的糟糕吗？看上去是这样，但事实不是这样的，因为CSS预处理器提供了一些真正有用的特性。

连接（Concatenation）

我认为最有价值的东西是连接你的文件。我相信，你知道使用@import来引用你的.css文件，告诉浏览器获取这个文件。这样做，浏览器需要增加一个请求，这样有点麻烦，因为你可能有很多个这样的文件。增加额外的请求，使你的程序性能变得更低。如果您使用CSS预处理器语言，这个问题将不会存在。他们只会编译你样式文件中单个.css文件。

扩展（Extending）

LESS和Sass是最主要的两个CSS预处理器。我们都支持扩展。虽然他们的工作方式略有不同，但他们的想法是一样的。你可以做一个基本的类（通常称为mixin）和一群属性，然后在另一个选择器导入这些属性，如：

// less

.bordered(@color: #000) {

    border: dotted 2px @color;

}

.header { .bordered; }

.footer { .bordered(#BADA55); }

// 编译出来的CSS

.header {

    border: dotted 2px #000000;

}

.footer {

    border: dotted 2px #bada55;

}

这里的问题是，如果你没有定义一个参数的mixin，例如刚才的示例：

.bordered {

    border: dotted 2px #000;

}

这是最后编译的CSS文件，无论你是否使用都没有任何关系。因为他是一个有效的选择器。在Sass中我们可以做得更灵活一些。他有混合(mixins)、扩展（extends）和占位选择器(placeholders)（如果您想看到他们之间的区别，我强烈建议您阅读这篇文章）。接下来我们简单看看Sass是如何工作和编译的：

// sass

@mixin bordered($color: #000) {

    border: dotted 2px $color;

}

.header { @include bordered; }

.footer { @include bordered(#BADA55); }

//编译的CSS

.header {

    border: dotted 2px black;

}

.footer {

    border: dotted 2px #bada55;

}

它看起来和前面几乎相同，但如果我们秋看第二个placeholder的用例：

// sass

%bordered {

    border: dotted 2px #000;

}

.header {

    @extend %bordered;

}

.footer {

    @extend %bordered;

}

// 编译的CSS

.header, .footer {

    border: dotted 2px #000;

}

这个有两个优势，首先不会编译出.bordered类名，其次会使用组合选择器，合并相同的样式，使代码变得更加简洁。

配置（Configuration）

LESS和Sass都支持变量，你可以调用这些变量，将将他们作为属性的值：

// sass

$brand-color: #009f0A;

...

h1 {

    color: $brand-color;

}

这是一个很好的特性，因为你可以储存一些重要的东西，比如说颜色或者网格的宽度，将他们存放在同一个地方，如果你需要修改一些不经常改动的代码，会变得非常的简便。

另一个好处理，可以使用变量的插值，如下面演示的方法：

// sass

@mixin border($side) {

    border-#{$side}: solid 1px #000;

}

.header {

    @include border("left");

}

// 编译的CSS

.header {

    border-left: solid 1px #000;

}

针对预处理器（Against the preprocessors）

预处理器是一种工具，您要使用得先要有一个适合的环境。如果你思念将其集成到你的应用程序中，也需要额外的编码。
如果你不想让你的代码变得混乱，你需要有一个观察机制，用来监测你的文件。如果这样，你每个项目开始时就需要运行这个监测机制。
通常开发人员只看到.less或.sass文件，但是输出是什么非常重要。你可能有写得很好的Sass代码，但这并不意味着，你最终会有很好的CSS代码。可能会有一些特异性的问题，所以需要定期检测编译的版本。

扩展阅读

BEM

好的，我找到了一个新的好玩工具。这个预处理器可以节省大量的时间，但他不能为你写出好的结构。首先，我开始考虑是一个命名约定，让我们来看以下的HTML标签：

<header class="site-header">

    <div class="logo"></div>

    <div class="navigation"></div>

</header>

可能会写出对应的样式：

.site-header { ... }

.logo { ... }

.navigation { ... }

这样的样式能正常的工作，但它有一个问题——阅读CSS，让人难于理解。例如，logo是属于header部分的，你可能有另一个logo要放在页脚footer处。那么将添加一个后代选择器来控制：

.site-header .logo { ... }

但是使用这些选择器并不是很好的主意，因为它始终需要依赖于特定的标记和结构。一旦你把logo移到<header>外面，样式将会丢失。另外一种做法是给logo添加一个site-header，给其重新命名：

.site-header-logo { ... }

很棒了，自己就是说明，但它并不能运用于所有情况之下。例如，我想在12的圣诞节使用一个圣诞节版本的logo。所以，我不能写：

.site-header-logo-xmas { ... }

因为我的逻辑是，写一个选择器要像嵌套HTML标签一样匹配。

BEM可能解决这样的情况。这意味着块(Block)、元素(Element)和修改器（Modifier）和一些创建规则，你可以遵循这些规则。使用BEM，我们的小例将变成：

.site-header { ... } /* block */

.site-header__logo { ... } /* element */

.site-header__logo--xmas { ... } /* modifier */

.site-header__navigation { ... } /* element */

也就是说site-header是我们的块。那么logo和navigation是这个块的元素，圣诞版本的logo是修饰符。也许它看起来简单，但是它真的很强大。一旦你开始使用它，会发现他能让你的结构更加的优秀。当然也有反对的理由，那就是因为其语法。是的，或许看起来有点丑，但为了有一个好的结构，我会准备为此做出牺牲。（更好的阅读请点这和这）。

扩展阅读

OOCSS

自从我发现BEM，我就开始在思考如何正确的使用我的类名。也许，我的第一件事情要读一篇关于面向对象的CSS。面向对象编程添加了一些抽像的概念，CSS也支持这样的概念。如果你使用了CSS预处理器，你或多或少知道一些。做为一个编写代码的人，我发现这个概念离我平时编程很近，拿JavaScript为例，有两个主要原则：

单独的结构和样式

我们用下面的例子来进行介绍：

.header {

    background: #BADA55;

    color: #000;

    width: 960px;

    margin: 0 auto;

}

.footer {

    background: #BADA55;

    text-align: center;

    color: #000;

    padding-top: 20px;

}

其中有一些样式是重复的，我们可以考虑在另一个类中提取这些相同的样式：

.colors-skin {

    background: #BADA55;

    color: #000;

}

.header {

    width: 960px;

    margin: 0 auto;

}

.footer {

    text-align: center;

    padding-top: 20px;

}

所以我们使用colors-skin做为一个对象，用来扩展。这样HTML模板修改成像这样：

<div class="header colors-skin"> ... </div>

<div class="colors-skin"> ... </div>

<div class="footer colors-skin"> ... </div>

这样做有几个好处：

有一个类，它可以使用多次
如果需要修改，只需要修改一个地方
在CSS样式中删除重复的代码，使其文件变得更低

独立的容器和内容

这里的想法是，每个元素应该有相同的样式，不管他放在何处。所以，你应该尽量避免使用像下面演示的选择器：

.header .social-widget {

    width: 250px;

}

如果你把.social-widget移动.header容器的外面，那么.social-widget的宽度就变了。尤其是用在页面上的组件。这也是我鼓励CSS模块化以及我强烈建议采用更多的时间去尝试。就我个人而言，以下的原则会将CSS写得更好。

框架

如果你在GitHub上打开OOCSS库你可以看到一个框架。是的，这个框架使用了面向对象的概念，他的CSS有很多很优秀的现成组件。很长一段时间我并不喜欢框架。如果你有在工作使用框架，你会发现他分为两个部分。事实上，你使用框架处理一些事情，你必须遵守他的规则。不过我更喜欢使用一些微小的框架。当然我不是说我得重新去造*，但我总是试图去寻找一种平衡。通常现成的解决方案导致系统的混乱和复杂。我建议是为一定的目的建立一个特定的东西。如果你试图去覆盖一些东西，你总是想到框架中的东西。

但事，我强烈建议你去查寻一个OOCSS框架。这是一个独特的知识块，也许它将适合用在你需要的地方。最早是由Nicole Sullivan提出这样的一个概念。如果你对OOCSS有什么意向或者想法，可到这里参加讨论。

扩展阅读

SMACSS

另一个流行的概念是SMACSS。SMACSS代表可伸缩的和是模块化的CSS结构体系。Jonathan Snook为CSS开发人员介绍了类似于这样的样式指南。为了单独的应用程序将其分为以下几类：

基本(base)：用于一个简单的选择器的基本样式，如clearfix
d布局（Layout）:定义网格
模块(Module)：一群元素相结合在一起形成的一个模块，比如说header和sidebar
状态（State）:元素的不同状态。如隐藏、按住，扩大等规则定义给对象
主题(Them)：更多的样式

我没有使用SMACSS的任何经验，便它是非常受欢迎，实际上也能促进你有更好的想法。这比一个框架的概念更强。所以，你不需要遵循任何严格的规则、类或者组件。

扩展阅读

Atomic Design

知道了OOCSS和SMACSS后，请允许我找一个恰当的比喻，请快速登录这个页面。这里展示了一个伟大的原子设计概念。它的作者是Brad Frost，众所周知，他是一位有名的Web开发人员，致力于响应式设计和移动端开发。

这个想法是非常有趣的。以下是一些术语，我们可以说，物质的基本单位是原子。Brad Frost说我们的页面是用移动的原子构建，一个原子可以是：

<label>Search the site</label>

或者

<input type="text" placeholder="enter keyword" />

也就是说原子是包括了一些基本样式的DOM元素。如颜色、字体大小或者过渡动画。后来这些部分可以结合成分子，例如：

<form>

    <label>Search the site</label>

    <input type="text" placeholder="enter keyword" />

    <input type="submit" value="search" />

</form>

所以表单元素包含了几个原子。这样抽象带来的灵活性，因为我们可以使用相同的原子来构建另一个分子。这样一来，我们在不同的上下文中可以重用相同的形式：

Brad Frost并没有停止。生特体是构建分子的东西，遵循同样的方法，我们可以编写以下的结构，并将其称为有机体：

<header>

    <div class="logo"> </div>

    <nav>

        <ul>

            <li><a href="#">Home</a></li>

            <li><a href="#">About</a></li>

            <li><a href="#">Contacts</a></li>

        </ul>

    </nav>

    <form>

        <label>Search the site</label>

        <input type="text" placeholder="enter keyword" />

        <input type="submit" value="search" />

    </form>

</header>

第二件事是模板的概念。他们不是直接相关的化学反应，但被放入了Web的上下文。一旦我们开始结合不同的生物构建我们的模板。后来这些模板形式就是我们最后得到的页面。

你可能已经使用类似的方法来构建应用程序。然而，命名的东西以一种合理的主式带来良好的结构。在开发中，你和你的队友会有很多事情需要去弄明白。分离的原子和分子是很重要的部分，因为它提高了工作效率和让你更好的维护您的Web应用程序。

扩展阅读

OrganicCSS

两个月前，我写了一篇文章，是有关于Organic的，他是一个用JavaScript写的一个伟大的小框架。它更像是一种设计模式，我个人非常喜欢。我甚至在好几个项目中使用了它，并且一切都很顺利。如果你有兴趣的话，我强烈推荐您阅读这篇文章。

当我阅读了Brad Frost的文章，我就已经有了类似于的概念，因为我知道Organic。Brad做的非常的棒，但是我决定更深入的去了解，或尝试自己在基于原子设计概念的基础上写一个小型的框架。我最终选择了Sass作为预处理器和在Github上创建了一库organic-css。

原子（Atoms）

让我匀先从框架最小的一部分开始——原子。*是这样定义的，原子是物质的基本单位。在CSS中，我认为它是一个属性和一个属性值，例如：

margin-top: 24px;

仅仅为了写样式添加原子而直接添加类名，这并不是我想要的，如果有一个这样的类型：

body {

    margin-top: 24px;

}

header {

    margin-top: 24px;

}

预处理器将会失去他自己作用，因为我想要的结果是这样的：

body, header {

    margin-top: 24px;

}

在Sass中可以使用placeholders的功能，例如：

%margin-top-24 {

    margin-top: 24px;

}

body {

    @extend %margin-top-24;

}

header {

    @extend %margin-top-24;

}

所以我不得不使用placeholder。这也意味着，我必须要定义很多placeholders，才能使用。在那一刻，我决定，这个框架将只包含原子。也许有一些分子和通用的函数，例如reset.css、网格的定义等等。我想写点东西，作为一个基础的CSS开发。也许我会看到项目中的一些模式，将其放在核心处，作为一个开始，并保持干净和简单。

事情变得更加的一致化，我创建了一个mixin作为一个原子。如这个例子：

@include define-atom("block") {

    display: block;

}

@include define-atom("font-family") {

    font-family: Georgia;

}

使用这种方法，我创建了一个原子群，并且可以很容易的适合用于每一个项目。你可以点击查看。我并且拿其他的框架作为对比，让我更好的去实践，从中学到很多东西。还可以制作一个mixin分子，将原子相结合在一起：

@mixin header { // <- molecule called 'header'

    @include atoms((

        block,

        clearfix,

        font-family

    ));

}

分子（Molecules）

分子是一个DOM元素需要样式，但他没有子元素。或者他有子元素，便也不会直接连接到它。如<img src="logo.jpg" />，可能是一个分子。如果你很难在你的页面识别这些分子，只需要想到什么是由原子构建就行。有些元素也有可能是构建其他分子的原子。如：

@mixin login-box {

    @include atoms((

        block,

        font-size-20,

        margin-top-23,

        bold

    ));

}

我们将面对一些很有趣的事。比如说我们的body标签。他是什么呢？它是一个分子或其他什么吗？当然，这需要一些样式，但一般在原子中包含其他分子。它应该是其他东西。我的结论是，CSS应该是主要部分，也就是说，如果body样式需要几个原子，那么他就是一个分子。这也就意味着，从理论上讲，我不应该附加任何其他的分子给它。这看起来有点不切实际，但在大多数情况下，会让你使用不同的选择器，这将是一个好的发展迹象。

细胞器（Organelles）

一旦你认识到这个DOM元素是分子，那么你可以将其看到是一个细胞器。例如，典型的表单元素是一个很好的细胞器例子，他包含像label、input和textarea这样的分子。

.login-form {

    @include label;

    @include input;

    @include textarea;

}

这些也许是框轲中的一部分，它紧密的连接到当前应用程序中。原子和分子可能在不同项目之间移动，而细胞器是不可能会移动的。

更抽象（More abstractions）

很多时候你可能想把几个别的东西放在一起，这样细胞器变得更加抽象：

Atom → Molecule → Organelle → Cell → Tissue → Organ → Sys → Organism

这将面对一个选择问题，你将如何构建你的CSS。我以前只在一个项目中使用OrganicCSS，到目前为止，我还可以说他是清晰的。我把不同的元素放在他们自己的目录中和按他们的名命名，这样我可以很容易的找到他们，并做相应的处理。例如，如果有一个细胞器称为header，我只需要将其修改为o-header。后来，让我读到HTML标记，我就可以看到该元素的CSS样式就在细胞器文件夹中。

扩展阅读

Micro framework following atomic design.

总结

这是一个很有趣的旅程。我不知道我将来会不会使用OrganicCSS，但这并不是最重要的部分。我能从中学到东西才是最重要的。我知道我必须改变我们的CSS开发过程，我做到了。我认为我们应该多谈谈CSS的框架。你可以看到我们有很多好的资源。我们必须找到他们，学习他们做什么以及如何工作。只有这样我们才可以决定是否使用他们。更好的是，当你看到整个图片你可以创造一些更适合你的需求。

特别声明：本文有很多概念也是初次接触，就对此文进行翻译，如果有理解错语的地方，希望不会给您带来误解，同时更希望这译文能改变你对CSS的构建方式，从而找出更适合您或您团队使用CSS的最佳方式。最后希望更多的同行朋友能指正文中不正确的地方和分享相关的资源(^_^)

译者手语：整个翻译依照原文线路进行，并在翻译过程略加了个人对技术的理解。如果翻译有不对之处，还烦请同行朋友指点。谢谢！

如需转载烦请注明出处：

英文原文：http://davidwalsh.name/starting-css

中文译文：http://www.w3cplus.com/css/starting-css.html

码农公寓

CSS预处理器

连接（Concatenation）

扩展（Extending）

配置（Configuration）

针对预处理器（Against the preprocessors）

扩展阅读

BEM

扩展阅读

OOCSS

单独的结构和样式

独立的容器和内容

框架

扩展阅读

SMACSS

扩展阅读

Atomic Design

扩展阅读

OrganicCSS

原子（Atoms）

分子（Molecules）

细胞器（Organelles）

更抽象（More abstractions）

扩展阅读

总结

相关文章