< >头 CSS的可扩展和模块化架构:一个SMACSS介绍| Toptal®-欧博体育app下载作者都是各自领域经过审查的专家，并撰写他们有经验的主题. 我们所有的内容都经过同行评审，并由同一领域的Toptal专家验证.< / div >< / div >
斯洛博丹·盖奇的头像< / div >
< / div >

斯洛博丹·Gajic

< / div >

斯洛博丹的开发生涯始于他的IT学士学位，最近又进入了电子竞技领域. HTML5/CSS3/JS和Angular是他的支柱.

< / div >< / div >< / div >
< / div >< / div >< / div >< / div >< / div >< / div >< / div >< / div >
< / div >
< / div >
< / div >< / div >分享< / div >< / div >< / div >

当我们致力于大型项目或与开发团队合作时, 我们经常发现我们的代码很乱, 难以阅读, 很难扩展. 尤其是在时间流逝之后，当我们回过头来再看一遍的时候——我们必须试着保持当初写作时的心态.

所以很多人所做的就是创造 CSS 架构，以帮助设计他们的代码样式，使CSS变得更具可读性. SMACSS—i.e., 可伸缩的 和 模块化的体系结构 为 CSS-旨在做到这一点. 我采用了Jonathan Snook的一套CSS架构指南.

现在, SMACSS的体系结构方法与Bootstrap或Foundation等CSS框架略有不同. 相反，它是一套规则，更像是一个模板或指南. 所以，让我们深入了解一些CSS设计模式，看看如何使用它们使我们的代码更好， 更清洁的，更容易阅读，更模块化.

每个SMACSS项目结构使用五个类别:

  1. Base
  2. 布局
  3. 模块
  4. 状态
  5. 主题

Base

在SMACSS中，基本样式定义了元素在页面上任何位置的外观. 它们是默认值. 如果您正在使用重置样式表, 这确保了你得到的样式在不同浏览器之间是相同的，尽管它们内部的不同, 硬编码的基础CSS默认值.

在基础样式中, 您应该只包含裸元素选择器, 或者那些带有伪类的, 但不能使用类或ID选择器. (你应该有很好的理由把类或ID放在里面, 也许只有当你对第三方插件的元素进行样式化时，你才需要覆盖该特定元素的默认样式.)

下面是一个基本文件单元的示例:

html {
    保证金:0;
    字体类型:无衬线;
}

a {
    颜色:# 000;
}

按钮{
    颜色:# ababab;
    边框:1px实心#f2f2f2;
}

所以它应该包含默认大小, 利润率, 颜色, 边界, 以及计划在整个网站中使用的任何其他默认值. 你的排版和表单元素应该有统一的风格，出现在每个页面上，给人一种感觉和外观，它们是相同的设计和主题的一部分.

无论是否SMACSS，我强烈建议避免使用 !重要的 并且不要使用深度嵌套，但我将在这篇文章的后面讨论更多. 此外，如果你的实践是使用重置CSS，这是你应该包括它的地方. (我更喜欢用Sass, 所以我把它放在文件的顶部, 而不是把它复制进去，或者从每一页单独引用它 元素.)

相关: 主题与Sass:一个SCSS教程 < / div >

布局

布局样式会将页面划分为主要部分，而不是像导航栏或手风琴栏那样的部分, 例如, 但真正的顶级部门:

示例SMACSS布局样式:页眉、侧边栏、内容/主栏和页脚
< / div >

SMACSS布局样式主要用于标题、侧边栏、内容/主栏和页脚等主要部分.< / div >

这些布局将容纳多个CSS模块，如框, 卡片, 无序列表, 画廊, 诸如此类, 但我将在下一节中更多地讨论模块. 让我们考虑一个示例网页，看看我们可以划分哪些布局:

一个示例网页，可以使用SMACSS组织成页眉、主页和页脚布局样式
< / div >

这里我们有header, main和footer. 这些布局在顶部的标题上有链接和徽标等模块, main上的方框和文章, 以及页脚的链接和版权. 我们通常给布局一个ID选择器，因为它们不会在页面上重复，而且它们是唯一的.

此外，你应该在布局样式的规则前加上字母 l 将它们与模块样式区分开来. 通常在这里，你会对特定于布局的东西进行样式化，比如边框、对齐、边距等. 此外，这部分页面的背景也可以理解, 即使它看起来并不是布局特定的.

下面是它应该如何看起来的一个例子:

#标题{  
    背景:# fcfcfc;
}

#头 .一个{
    浮:正确;
}

#头 .l-align-center {
    文本-align:中心;
}

您还可以为对齐添加这些帮助程序，您可以使用它们轻松地定位元素，只需向其子类添加适当的类或对齐其文本.

另一个例子，你可以在布局框上使用一些默认的边距，比如 .l-margin 有余量的 20px. 然后，无论您在哪里想要填充一些容器、元素、卡片或盒子，您只需添加 l-margin 类到它. 但你想要一些可重复使用的东西:

.l-full-width {
    宽度:100%;
}

不是像这样内部耦合的东西:

.l-width-25 {
    宽度:25 px;
}

我想花点时间谈谈SMACSS中的命名约定. 如果您从未听说过CSS中的名称空间概念, 它基本上是将名称添加到另一个元素的开头，以帮助将其与其他元素区分开来. 但我们为什么需要这个?

我不知道你们是否遇到过下面的问题. 您正在编写CSS，并且在某些东西上有一个标签-您可以放入您喜欢的任何样式, 然后调用你的类 .label. 但之后你会遇到另一个元素，你也希望它是 .label，但风格不同. 所以两个不同的东西有相同的名字——命名冲突.

名称空间可以帮助您解决这个问题. 最终, 它们在一个层面上被称为相同的东西, 但是它们有不同的命名空间——不同的前缀——因此可以表示两种不同的风格:

.盒子,标签{
    颜色:蓝色;
}

.卡,标签{
    颜色:红色;
}

模块

就像我之前提到的, SMACSS模块是可在页面上重用的较小的代码块, 它们是单一布局的一部分. 这些是我们想要存储在单独文件夹中的CSS部分, 因为我们会在一页上有很多这样的东西. 随着项目的增长，我们可以使用文件夹结构最佳实践进行拆分.e.，按模块/页面:

使用SMACSS和Sass的示例文件/文件夹层次结构
< / div >

在前面的例子中，我们有一篇文章，它可以是一个独立的模块. CSS应该如何构建? 我们应该上课 .article 哪些可以有子元素 title 和 文本. 因此，为了能够将其保持在同一个模块中，我们需要为子元素添加前缀:

.{条
    背景:# f32;
}

.文章,标题{
    字体大小:16 px;
}

.文章——文本{
    字体大小:12 px;
}

您可能注意到我们在模块前缀后面使用了两个连字符. 原因是有时模块名有两个单词或它们自己的前缀，比如 文章就. 我们需要两个连字符来区分它的哪一部分是子元素- e.g. 比较 文章就-title to 文章,标题 和 文章篇幅——文本.

此外，如果一个特定模块占用了页面的很大一部分，你可以在模块中嵌套模块:


    
This is 盒子 label

    
    
        
  • Box 列表 元素
    •

这里，在这个简单的例子中，你可以看到 盒子 是一个模块和 列表 里面还有其他模块吗. So 列表——李 是孩子的吗 列表 模块而不是的 盒子. 这里的一个关键概念是每个CSS规则最多使用两个选择器, 但在大多数情况下，只有一个带前缀的选择器.

这种方式, 我们可以避免重复的规则，也可以避免在具有相同名称的子元素上使用额外的选择器, 从而提高速度. 但它也能帮助我们避免使用不必要的东西 !重要的样式规则，这是结构不良的CSS项目的标志.

好(注意单选择器):

.红色的盒子——{
    背景:# fafcfe;
}

.红色框,列表{
    颜色:# 000;
}

坏(注意选择器内的重复和重叠的引用方法):

.红色的 .盒子{
    背景:# fafcfe;
}

.红色的 .盒子 .{列表
    颜色:# 000;
}

.框ul {
    颜色:# fafafa;
}

状态

SMACSS中定义的状态是描述模块在不同动态情况下的样子的一种方式. 所以这部分实际上是为了交互性:如果一个元素被认为是隐藏的，我们想要不同的行为, 扩大, 或修改. 例如, jQuery手风琴需要帮助定义什么时候可以看到或不可以看到元素的内容. 它帮助我们在特定时间定义元素的样式.

状态和布局应用于相同的元素，所以我们添加了一个额外的规则来覆盖之前的规则, 如果有任何. 状态规则具有优先级，因为它是规则链中的最后一个规则.

与布局样式一样，我们倾向于在这里使用前缀. 这有助于我们认识到它们并给予它们优先权. 这里我们使用 is 前缀，如 是隐藏的 or 被选中.



.导航——项目.选择{
    颜色:# fff;
}

在这里, !重要的 可能会被使用，因为状态经常被用作JavaScript修改而不是在渲染时. 例如，您有一个隐藏在页面加载中的元素. 点击按钮，你想要显示它. 但是默认的类是这样的:

.盒子 .元素{
    显示:没有;
}

所以如果你加上这个

.显示{
    显示:块;
}

它将保持隐藏，即使您添加 .显示的是 类通过JavaScript加载到元素中. 这是因为第一条规则有两层深度，并且会覆盖它.

所以你可以这样定义状态类:

.显示{
    显示:块 !重要;
}

这就是我们区分状态修饰符和布局修饰符的方式, 哪些只适用于页面的初始加载. 这将在保持最小选择器的优点的同时工作.

主题

这一点应该是最明显的, 因为它被用来包含原色的规则, 形状, 边界, 阴影, 等. 大多数情况下，这些元素在整个网站中重复出现. 我们不希望每次创建它们时都重新定义它们. 相反，我们希望定义一个惟一的类，稍后才添加到默认元素中.

.button-large {
    宽度:60 px;
    高度:60 px;
}

不要将这些SMACSS主题规则与基本规则混淆, 因为基本规则只针对默认外观，它们倾向于将浏览器设置重置为默认设置, 而主题单元更像是一种样式，它给出了最终的外观, 这个特定的配色方案是独一无二的.

如果一个站点有不止一种样式，或者可能在不同状态下使用了几个主题，那么主题规则也很有用，因此可以在页面上的某些事件期间轻松更改或交换, e.g. 有一个主题切换按钮. 至少, 他们保持所有的主题风格在一个地方，所以你可以很容易地改变他们，并保持他们很好的组织.

CSS组织方法

我已经介绍了这种CSS架构思想的一些关键概念. 如果你想了解更多关于这个概念，你可以访问 SMACSS官方网站 并深入其中.

是的，您可能可以使用更高级的方法，例如 OOCSS和BEM. 后者几乎涵盖了完整的前端工作流及其技术. 本选择器 可能对某些人很有效, 但有些人可能会觉得时间太长，难以承受, 而且使用起来也太复杂了. 如果你需要一些更简单的东西，更容易上手，更容易融入到你的工作流程中，也更容易为你和你的团队定义基本规则，那么smacss是一个完美的选择.

新团队成员不仅可以很容易地理解以前的开发人员所做的工作, 但也要立即开始工作, 在编码风格上没有任何差异. SMACSS只是一种CSS架构，它做的就是它在罐头上说的——不多也不少.

< / div >< / div >< / div >< / div >

了解基本知识

  • CSS有哪些不同类型?

    有三种类型. 内联CSS直接放在HTML元素的style属性上. 内部CSS位于HTML头部的样式标签中. 外部CSS是来自HTML文件的单独文件, 避免网站上HTML页面内部和页面之间的重复.

    < / div >< / div >

  • 什么是“CSS模板”??

    CSS模板通常是特定的布局，这样我们就可以在多个页面甚至网站上使用它们. 有时，它们超越了布局, 为特定类型的元素(如模态和按钮)定义一组规则, 甚至是一群. 有些还定义了HTML元素的默认样式.

    < / div >< / div >

  • 为什么CSS如此重要?

    CSS在现代网页中绝对是必须的. 没有它，网页就只是空白背景上的纯文本和图片. 它不仅赋予页面风格, 但也组织布局和提供效果和动画-所以它对交互性也很重要.

    < / div >< / div >

  • 使用CSS的优点是什么?

    一个主要的优点是把所有的样式放在一个地方，而不是在整个网页的每个元素上都有样式. 它为我们提供了更多的格式化选项，并有助于优化页面加载时间和代码重用.

    < / div >< / div >

  • 为什么可扩展性如此重要?

    一般来说，为了在项目增长时保持可扩展性和可维护性，可伸缩性非常重要. 特别是CSS, 如果我们不编写可扩展和模块化的代码, 它很快就会失去控制, 变得难以理解和处理, 尤其是对新人. 因此需要SMACSS.

    < / div >< / div >
< / div >< / div >

标签

< / div >< / div >< / div >< / div >
聘请Toptal这方面的专家.< / div >现在雇佣< / div >< / div >
< / div >
< / div >
< / div >< / div >< / div >< / div >< / div >
< / div >< / div >
< / div >

世界级的文章，每周发一次.

<为m aria-label="Sticky subscribe 为m" class="-Ulx1zbi P7bQLARO _3vfpIAYd">
< / div >

订阅意味着同意我们的 隐私政策

< / div >< / div >< / div >< / div >
< / div >

世界级的文章，每周发一次.

<为m aria-label="Bottom subscribe 为m" class="-Ulx1zbi P7bQLARO _3vfpIAYd">
< / div >

订阅意味着同意我们的 隐私政策

< / div >< / div >< / div >< / div >< / div >< / div >< / div >

Toptal开发者

< / div >< / div >

加入总冠军® 社区.

聘请开发人员 or 申请成为发展商< / div >< / div >< / div >