前端大神与码农的却别：你在小瞧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. 记住：每一个人都作得不同。有不少想法和意见。四处玩玩，找出最适合你的东西。