什么是模块化 CSS？ #4538

SSShooter · 2018-10-03T10:42:30Z

译文翻译完成，resolve #4520

Hopsken · 2018-10-03T13:14:13Z

@leviding 校对认领

fanyijihua · 2018-10-03T13:14:17Z

@Hopsken 好的呢 🍺

ghost · 2018-10-03T14:26:02Z

校对认领

fanyijihua · 2018-10-03T14:26:05Z

@park-ma 妥妥哒 🍻

Hopsken

翻译得很棒👍

Hopsken · 2018-10-04T00:29:27Z

TODO1/what-is-modular-css.md

@@ -5,39 +5,39 @@
 > * 译者：
 > * 校对者：


Hopsken · 2018-10-04T00:34:32Z

TODO1/what-is-modular-css.md


-_(Pssst: If you feel overwhelmed by the length of this post, you might prefer to [watch a video](https://www.youtube.com/watch?v=Ty5jtMZXbmk) of the presentation it was based on.)_
+**（Pssst：如果你对这篇文章的篇幅感到不知所措，[观看视频](https://www.youtube.com/watch?v=Ty5jtMZXbmk)可能更适合你，这篇文章来源于此演讲。）**


个人意见，『Pssst』可以译为『嘘』

改成了偷偷告诉你 😂

Hopsken · 2018-10-04T00:38:16Z

TODO1/what-is-modular-css.md


-The primary problem that Modular CSS was created to solve is that CSS at scale is tricky. I love [this quote](https://twitter.com/necolas/status/360170108028600320) from [Nicholas Gallagher](https://twitter.com/necolas):
+模块化 CSS 使用的主要场景是棘手的大规模 CSS。[Nicholas Gallagher](https://twitter.com/necolas) [所说的](https://twitter.com/necolas/status/360170108028600320)，我很喜欢：


建议改为『我很喜欢 Nicholas Gallagher 说的一句话』

Hopsken · 2018-10-04T00:42:24Z

TODO1/what-is-modular-css.md

@@ -46,182 +46,182 @@ Here’s an example from the [CSS Guidelines](https://cssguidelin.es/#naming-con
 </div>
 ```

-> How are the classes `box` and `profile` related to each other? How are the classes `profile` and `avatar` related to each other? Are they related at all? Should you be using `pro-user` alongside `bio`? Will the classes `image` and `profile` live in the same part of the CSS? Can you use `avatar` anywhere else?
+> `box` 和 `profile` 有什么关系？`profile` 和 `avatar` 有什么关系？或者他们之间有关系吗？你应该在 `bio` 旁边添加 `pro-user` 吗？`image` 和 `profile` 写在同一部分 CSS 吗？可以在其他地方使用 `avatar` 吗？


建议改为『或者他们之间真的有关系吗』，以表现出『at all』一词的语气

Hopsken · 2018-10-04T00:59:34Z

TODO1/what-is-modular-css.md


-Modular CSS is bottom-up thinking. It asks you to start with the reusable building blocks that your entire site is constructed from.
+模块化 CSS 是自下而上的思维。你需要从构建整个站点的可复用构建块开始。


译为『从构建整个站点的可复用模块开始』会不会更通顺一些？

Hopsken · 2018-10-04T01:44:19Z

TODO1/what-is-modular-css.md


+以下是他为CSS系统可能包含的规则类型定义的类别：
 Here are the categories he defined for the types of rules a CSS system might contain:


这里似乎忘删了？

Hopsken · 2018-10-04T01:45:40Z

TODO1/what-is-modular-css.md

-4.  **State** rules describe how modules or layouts look in a particular state. Typically applied or removed with JavaScript. For example, hidden, expanded, active, etc.
-5.  **Theme** rules describe how modules or layouts look when a theme is applied. For example, in Yahoo Mail, you might apply a user theme, which would affect every modules on the page. (This is really specific to apps like Yahoo. Most sites won’t use this category.)
+1.  **基础（Base）** 规则是HTML元素的默认样式，如链接，段落和标题。
+2.  **布局（Layout）** 规则将页面分成几个部分，并将一个或多个模块组合在一起。它们只定义布局，而不管颜色或字体。


『typography』应译为『排版』

Hopsken · 2018-10-04T01:46:28Z

TODO1/what-is-modular-css.md

-5.  **Theme** rules describe how modules or layouts look when a theme is applied. For example, in Yahoo Mail, you might apply a user theme, which would affect every modules on the page. (This is really specific to apps like Yahoo. Most sites won’t use this category.)
+1.  **基础（Base）** 规则是HTML元素的默认样式，如链接，段落和标题。
+2.  **布局（Layout）** 规则将页面分成几个部分，并将一个或多个模块组合在一起。它们只定义布局，而不管颜色或字体。
+3.  **模块（Modules）**（又名“对象”或“块”）是可重用的，设计中的一个模块。例如，按钮，媒体对象，产品列表等。


Modules => Module，根据中文习惯去掉复数

Hopsken · 2018-10-04T01:51:27Z

TODO1/what-is-modular-css.md


-These frameworks are more alike than they are different. I see a clear path from OOCSS to BEM to SMACSS. Their evolution represents our industry’s growing experience with performance and writing CSS at scale.
+这些框架与其说不同不如说它们更加相似。我看到从 OOCSS 到 BEM 再到 SMACSS 的明确发展。它们的发展代表了我们行业在性能和大规模 CSS 领域不断增长的经验。


第一句感觉有点别扭。我的话会这么翻译『这些框架的相同之处远胜于其不同之处』，仅供参考。

Hopsken · 2018-10-04T01:55:31Z

TODO1/what-is-modular-css.md

-*   Prefix class names
+*   不要使用 ID
+*   CSS 嵌套不要超过一层
+*   将类添加到子元素


建议译为『为子元素添加类名』，以前后统一

leviding · 2018-10-04T02:19:38Z

@SSShooter 可以修改啦

ghost

校对完成

ghost · 2018-10-04T01:58:22Z

TODO1/what-is-modular-css.md


-The primary problem that Modular CSS was created to solve is that CSS at scale is tricky. I love [this quote](https://twitter.com/necolas/status/360170108028600320) from [Nicholas Gallagher](https://twitter.com/necolas):
+模块化 CSS 使用的主要场景是棘手的大规模 CSS。[Nicholas Gallagher](https://twitter.com/necolas) [所说的](https://twitter.com/necolas/status/360170108028600320)，我很喜欢：


正如 Nicholas Gallagher 所说的，

感觉不错

ghost · 2018-10-04T02:21:27Z

TODO1/what-is-modular-css.md


-One of the most famous examples of this type of block is the “media object,” defined by [Nicole Sullivan](https://twitter.com/stubbornella). She argued that this object is one of the smallest discrete pieces of content that you’re going to find on any site.
+这样的“块”最着名的例子之一是由 [Nicole Sullivan](https://twitter.com/stubbornella) 定义的“媒体对象”，她认为这种对象是你将在任何网站上找到的最小的组件之一。


着名=>
著名

ghost · 2018-10-04T02:22:55Z

TODO1/what-is-modular-css.md


 ![An example of the media object](https://spaceninja.ghost.io/content/images/2016/11/media-blocks.jpg)

-It combines a fixed width image to one side of flexible width content. You can see this everywhere. She produced a case study, called “[The Media Object Saves Hundreds of Lines of Code](http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/),” that talked about applying this pattern to large-scale sites. One of her biggest examples was Facebook:
+它将固定宽度的图像组合到灵活宽度的容器的一侧，现在到处都可以看到这个模式。她撰写了一篇案例研究，名为 [The Media Object Saves Hundreds of Lines of Code](http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/)，谈到将此模式应用于大型网站，最大的例子之一便是 Facebook：


她撰写了一篇案例研究，名为 The Media Object Saves Hundreds of Lines of Code，=>
她撰写了一篇名为 The Media Object Saves Hundreds of Lines of Code 的案例研究，

ghost · 2018-10-04T02:35:16Z

@SSShooter @leviding 校对完成

SSShooter · 2018-10-04T12:43:28Z

@leviding 校对完成，感谢两位的细心校对 @Hopsken @park-ma

leviding · 2018-10-04T13:05:11Z

TODO1/what-is-modular-css.md

@@ -5,39 +5,39 @@
 > * 译者：


译者信息

leviding · 2018-10-04T13:05:19Z

TODO1/what-is-modular-css.md

@@ -5,39 +5,39 @@
 > * 译者：
 > * 校对者：


校对者信息

leviding

整体很不错，几处细节麻烦再优化下。

leviding · 2018-10-04T13:06:00Z

TODO1/what-is-modular-css.md

-1.  [CSS at Scale is Difficult](#css-at-scale-is-difficult)
-2.  [What is Modularity?](#what-is-modularity)
-3.  [Modular Frameworks](#modular-frameworks)
+1.  [大规模 CSS 的处理难点](#css-at-scale-is-difficult)


目录翻译了，对应的锚点也需要改为对应的链接。否则锚点无效。

leviding · 2018-10-04T13:06:10Z

TODO1/what-is-modular-css.md

-2.  [What is Modularity?](#what-is-modularity)
-3.  [Modular Frameworks](#modular-frameworks)
+1.  [大规模 CSS 的处理难点](#css-at-scale-is-difficult)
+2.  [什么是模块化？](#what-is-modularity)


leviding · 2018-10-04T13:06:32Z

TODO1/what-is-modular-css.md

-3.  [Modular Frameworks](#modular-frameworks)
+1.  [大规模 CSS 的处理难点](#css-at-scale-is-difficult)
+2.  [什么是模块化？](#what-is-modularity)
+3.  [模块化框架](#modular-frameworks)


锚点，16-24 行都需要改，就不一一指出了

leviding · 2018-10-04T13:10:37Z

TODO1/what-is-modular-css.md

-*   **Modules** are visual styles for reusable, self-contained UI components. Examples: `.m-profile`, `.m-card`, `.m-modal`
-*   **State** rules are added by JavaScript. Examples: `.is-hidden`, `.is-collapsed`, `.is-active`
-*   **Helper** (aka utility) rules are small in scope and independent of modules. Examples: `.h-uppercase`, `.h-nowrap`, `.h-muted`
+*   **基础（Base）** 规则是 HTML 元素的默认样式，如：`a`，`li`，`h1`


A 和 B
A、B 和 C
A、B、C 和 D

这是中文的常用表达方式，都好和和字的搭配使用注意一下，修改一下这几行。

leviding · 2018-10-04T13:10:44Z

TODO1/what-is-modular-css.md

-*   **State** rules are added by JavaScript. Examples: `.is-hidden`, `.is-collapsed`, `.is-active`
-*   **Helper** (aka utility) rules are small in scope and independent of modules. Examples: `.h-uppercase`, `.h-nowrap`, `.h-muted`
+*   **基础（Base）** 规则是 HTML 元素的默认样式，如：`a`，`li`，`h1`
+*   **布局（Layout）** 规则控制模块的布局方式，但不控制视觉外观，如：`.l-centered`，`.l-grid`，`.l-fixed-top`


leviding · 2018-10-04T13:11:05Z

TODO1/what-is-modular-css.md

-*   **Helper** (aka utility) rules are small in scope and independent of modules. Examples: `.h-uppercase`, `.h-nowrap`, `.h-muted`
+*   **基础（Base）** 规则是 HTML 元素的默认样式，如：`a`，`li`，`h1`
+*   **布局（Layout）** 规则控制模块的布局方式，但不控制视觉外观，如：`.l-centered`，`.l-grid`，`.l-fixed-top`
+*   **模块（Modules）** 是可复用的，独立的 UI 组件视觉样式，如：`.m-profile`，`.m-card`，`.m-modal`


293-297 行是一个问题，整体修改下，就不一一指出

添加译者、校对者修改举例尝试修改锚点

SSShooter · 2018-10-04T14:25:58Z

@leviding 修改完成

leviding

Good

leviding · 2018-10-05T00:36:48Z

@SSShooter 已经 merge 啦~ 快快麻溜发布到掘金然后给我发下链接，方便及时添加积分哟。

掘金翻译计划有自己的知乎专栏，你也可以投稿哈，推荐使用一个好用的插件。
专栏地址：https://zhuanlan.zhihu.com/juejinfanyi

SSShooter · 2018-10-05T01:59:26Z

@leviding 已发布~ https://juejin.im/post/5bb6c5195188255c9e02e6f3

SSShooter added 3 commits October 3, 2018 18:16

翻译基本完成

37e258c

修改错误

eb665e7

修复样式错误

81feb74

fanyijihua added the 校对认领 label Oct 3, 2018

fanyijihua mentioned this pull request Oct 3, 2018

什么是模块化 CSS？ #4520

Closed

leviding added the 前端 label Oct 3, 2018

fanyijihua added the 正在校对 label Oct 3, 2018

fanyijihua removed the 校对认领 label Oct 3, 2018

Hopsken reviewed Oct 4, 2018

View reviewed changes

leviding added the enhancement 等待译者修改 label Oct 4, 2018

ghost reviewed Oct 4, 2018

View reviewed changes

根据意见修改

7edae44

leviding reviewed Oct 4, 2018

View reviewed changes

TODO1/what-is-modular-css.md Outdated

@@ -5,39 +5,39 @@

> * 译者：

Copy link

Member

leviding Oct 4, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

译者信息

leviding reviewed Oct 4, 2018

View reviewed changes

TODO1/what-is-modular-css.md Outdated

@@ -5,39 +5,39 @@

> * 译者：

> * 校对者：

Copy link

Member

leviding Oct 4, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

校对者信息

leviding reviewed Oct 4, 2018

View reviewed changes

SSShooter added 3 commits October 4, 2018 22:19

修改

d4d71c5

添加译者、校对者修改举例尝试修改锚点

使锚点生效

9150ee5

使锚点生效

6ac426f

leviding approved these changes Oct 5, 2018

View reviewed changes

leviding merged commit 4146641 into xitu:master Oct 5, 2018

leviding added the 翻译完成 label Oct 5, 2018

leviding removed enhancement 等待译者修改正在校对 labels Oct 5, 2018

SSShooter deleted the translate/what-is-modular-css.md branch October 5, 2018 02:01


		_(Pssst: If you feel overwhelmed by the length of this post, you might prefer to [watch a video](https://www.youtube.com/watch?v=Ty5jtMZXbmk) of the presentation it was based on.)_
		（Pssst：如果你对这篇文章的篇幅感到不知所措，[观看视频](https://www.youtube.com/watch?v=Ty5jtMZXbmk)可能更适合你，这篇文章来源于此演讲。）


		The primary problem that Modular CSS was created to solve is that CSS at scale is tricky. I love [this quote](https://twitter.com/necolas/status/360170108028600320) from [Nicholas Gallagher](https://twitter.com/necolas):
		模块化 CSS 使用的主要场景是棘手的大规模 CSS。[Nicholas Gallagher](https://twitter.com/necolas) [所说的](https://twitter.com/necolas/status/360170108028600320)，我很喜欢：


		Modular CSS is bottom-up thinking. It asks you to start with the reusable building blocks that your entire site is constructed from.
		模块化 CSS 是自下而上的思维。你需要从构建整个站点的可复用构建块开始。


		以下是他为CSS系统可能包含的规则类型定义的类别：
		Here are the categories he defined for the types of rules a CSS system might contain:


		These frameworks are more alike than they are different. I see a clear path from OOCSS to BEM to SMACSS. Their evolution represents our industry’s growing experience with performance and writing CSS at scale.
		这些框架与其说不同不如说它们更加相似。我看到从 OOCSS 到 BEM 再到 SMACSS 的明确发展。它们的发展代表了我们行业在性能和大规模 CSS 领域不断增长的经验。


		One of the most famous examples of this type of block is the “media object,” defined by [Nicole Sullivan](https://twitter.com/stubbornella). She argued that this object is one of the smallest discrete pieces of content that you’re going to find on any site.
		这样的“块”最着名的例子之一是由 [Nicole Sullivan](https://twitter.com/stubbornella) 定义的“媒体对象”，她认为这种对象是你将在任何网站上找到的最小的组件之一。

什么是模块化 CSS？ #4538

什么是模块化 CSS？ #4538

Conversation

SSShooter commented Oct 3, 2018

Hopsken commented Oct 3, 2018

fanyijihua commented Oct 3, 2018

ghost commented Oct 3, 2018

fanyijihua commented Oct 3, 2018

Hopsken left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

leviding commented Oct 4, 2018

ghost left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ghost commented Oct 4, 2018

SSShooter commented Oct 4, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

leviding left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SSShooter commented Oct 4, 2018

leviding left a comment

Choose a reason for hiding this comment

leviding commented Oct 5, 2018

SSShooter commented Oct 5, 2018