前端大神与码农的区别：你在小瞧css，然而我却早已摸透CSS

css。这是一个网页设计师的围栏。有这么多颜色、类型设置、布局选项和响应性可能性，将样式表转换成一百万个行噩梦很容易。但是，只要有几个简单的操作，你就可以清理混乱，这样css就能与你一起工作，而不是针对你。前端开发人员赋予了一些智慧给我，但我仍然无法摆脱。现在我与你分享这一切!

---

你的css可能会一团糟，因为…

这只是自然而已。纠缠发生了。

级联。这是一种祝福和诅咒。通常情况下，当您更改一个元素的样式时，其他元素无意中会得到restyled。误用！重要使级联出现一个急刹车，并将您的不一致从一个元素样式到下一个。随着网站变得越来越大，或者越来越多的开发者开始在代码库上工作，css也会增长。没有计划，它就变成了狂野西部(野西.史密斯不会把你弄出这件事的。

您的css与html结构紧密耦合。

另一个常见错误是按照页面上元素显示的顺序编写css。当您在一个页面与其样式交叉引用时，这可能会有意义，但是一旦您考虑多个页面使用相同的css，它就会崩溃。如果有多个样式表，每页1样式表，您处于相同的困境。同样的情况下，过于特定的css选择器也倾向于镜像html。这会导致重复和膨胀…导致了糟糕的表现。这些都不是可伸缩的或者可维护的。

您没有使用模块化css

如果你编写css的方法是仔细地为每个元素设计样式，那么你就会错过树的森林。想象一下，在森林里凝视着，注意到所有枫树。您可以编写一个类来样式化所有的枫树，而不是为每个树编写重复样式。这就是您如何将您的设计抽象成可重用块的方式。

现在，想象一下构建一个登陆页面而无需编写单一的css。当您的css全部封装成可重用的块时，您就会得到一个完整的预样式片段的宝库。但这只是其中的一种福利。朱莉强调了使用模块化css的所有乐趣：

• 模块化-你可以从没有写任何一条css的情况下就能到达构建页面的重点。

• 可预测-不管你把组件放在哪里，它都会表现得一样，看起来也一样。编写代码很容易。您有一个命名它的系统。写起来更直观。

• 可维护性-这是快速和容易处理的。它不会破坏网站上的其他东西。

• 可伸缩-很难打破并且容易地建立起来。

• 干燥-它消除了在css中复制和粘贴复制的需求。

• 有组织-这里有个地方可以供你选择。

---

什么是模块化CSS？

有几个模块化解决方案，但是朱莉主要集中在一个叫做OOCSS(面向对象css)。它是一个可伸缩、可维护、语义和可预测的编写css的方法。妮可·沙利文在为facebook工作时创建了它。她开始改进一款笨拙的10000行样式表。她开始看到造型中的图案，从而导致她创建了一个可重用模块，称为“媒体”对象。通过这样做，她证明了她可以节省数百行代码。媒体对象是包含固定大小媒体元素(图像或视频)以及其他可变大小内容(文本)的内容块。考虑到这是facebook上最主要的内容形式，性能和可维护性的改善是巨大的！

OOCSS-原则

中的的两大原则是：从皮肤结构分离到容器分离，从内容分离。

皮肤结构分离意味着将重复模式定义为可重用结构。例如，什么使按钮看起来像按钮？你可能会说：“圆角、填充和边框。”然后你可能会重复视觉模式，它充当重复的皮肤。例如，您可能会有一些蓝色按钮和红色按钮。这些是两个单独的皮肤，因为它们每个都有不同的背景颜色。

容器与内容分离意味着无论您放在哪里，对象都应该看起来相同。换句话说，避免依赖位置的样式。例如，如果你正在设计像这样的h2…

.categoryList h2 { styles }.footer h2 { copied styles }

.你正在重复css的方式，这很难缩放。

这里有一个更好的方法来样式化标题。您可以重用此样式，即页眉放置位置的irregardless：

.sectionHeader { reusable styles }

OOCSS-物体

中的的基础是对象，它是您设计的一部分，可以在您的站点上重用。对象包含html、css、类似背景图像的组件以及javascript(任何行为、侦听器或方法与对象关联)。对象可以包含在模块中，该模块可能包含具有变化的基组件。例如，基本按钮可以拥有.btn类，也提供这些变体：.btn-primary, .btn-inverse, .btn-warning等等。下面是它在上下文中的外观。模块组件按层结构：

• 对象或模块或组件

  .media

• 修饰符(css设计变体)

  .media--inline, .media__img--right

• 国家(css或js设计调整)

  .media--collapsed, .media.is-active

• 儿童对象(关系)

  .media__img .media__body

OOCSS-最佳做法

当您正在考虑哪些对象构建时，朱莉指出了这些最佳实践。

1. 对象应该有一个单一的责任；他们应该做一件事情好，一件事。

2. 它们应该完全封装起来；对象应该能够站在自己的位置上，并且到处都是一样的。

3. 为对象、修饰符和状态使用类。这允许您灵活地混合和匹配这些，而不可能存在过于具体的风险。

4. 选择一个命名系统并保持一致。有不同的命名格式，所以形成一个团队作为计划。比如，CamelCase还是没有CamelCase？你如何辨认孩子、州、修饰词…大边界元方法(.block__element--modifier)?

5. 决定使用语义和/或表示命名。这是一个热门话题，但是要向你的团队提供帮助是值得的。

语义参数

• 课堂是否有实际的语义价值？

• 对谁来说，类语义是什么？

• 课堂应该是语义而不是表象吗？

• 是否更好地拥有一个语义类或多个混合类？

• 例子：.section-heading, .item-content

表象论证

• 类对浏览器没有意义。它只是用作匹配机制。

• 类对于开发人员来说是语义上的。

• 表示类是可重用的，并且不与内容相关联。

• 内容描述自己；类不需要。

• 例子：.padding-top-large, .no-margin

你想要什么？

• 干燥html(语义)或干燥的css(表示)

• 您是否有任何约束，比如无法访问css？你是否设计了一个第三派对工具被吐出来的html？

• 你可以混合使用。使用语义模块类和表示实用程序类可能对您的团队最有效。

---

怎样才能开始使用模块化css？

不知道从哪里开始？以下是朱莉关于下一步做什么的秘诀。这是一个伟大的讨论点，以培养您的团队，因为您将想要制定一个计划，为您的情况最好的工作。然后从那里采取小步骤开始收获模块化系统的好处。

1. 使用css预处理程序，例如Sass。使用分页、嵌套和子元素。这些有助于使重复变得更好。

2. 建立公约。选择命名系统、分类系统、定义代码格式化标准并记录所有内容。

3. 开始迭代抽象您的站点。从基础样式开始-html, body, p, a, h1-h6等然后构建块对象-lists, nav, buttons, media。之后，对复合对象进行工作-headers, footers, masonry cards, sidebars.

4. 不断地隔离代码直到找到一个舒适的粒度级别。

5. 停止使用css选择器用于非css(例如javascript、特征规范等等)。

6. 建筑师是个styleguide。在应用程序中构建它之前，在样式向导中构建组件(帮助确保封装)。如果一个班级要打破其他地方的东西，那么测试也是个不错的测试平台。

7. “组织，优化，重复直到你感到没有痛苦”-朱莉卡梅隆

8. 记住：每个人都做得不一样。有很多想法和意见。四处玩玩，找出最适合你的东西。