medium's blog

_posts/2015-07-24-mediums-css-is-actually-pretty-fucking-good.md

@@ -8,6 +8,8 @@ tags : [Medium, CSS]
 
 # Medium 的 CSS 真他*的好
 
+- 翻译自 [Medium by fat](https://medium.com/@fat/mediums-css-is-actually-pretty-fucking-good-b8e2a6c78b06)
+
 > I always believe that to be the best, you have to smell like the best, dress like the best, act like the best. When you throw your trash in the garbage can, it has to be better than anybody else who ever threw trash in the garbage can.   
 > 
 > — Lil Wayne
@@ -63,6 +65,77 @@ Medium 的 CSS 代码当然是非常不一样的，不是中性的不一样，
 
 ## Project 3: 新的样式指引
 
+制定了 Medium 规范后不久，我们开始了一场大的代码重构，代号 “Cocoon”。
+
+Cocoon 抛弃了一些 post 模版（Medium 本来包含图片模版，引用模版等，不仅仅包括单个文章的模版），并且使用 post 列表替代了 post “cards”。
+
+我们将这次重构作为重新考虑 Medium 并且创建一个新的样式指引的机会。
+
+最初由我，Dave Gamache，Dustin Senos，和非常聪明的 Chris Erwin 共同来完成了这项工作。
+
+我们花了一些时间来着实加强我们在 Medium 编写线上 CSS/LESS 的想法。主要的更新如下：
+
+- 限制 LESS 的使用，只允许使用 variables 和 mixing (不允许使用 nesting, guards, extend, 等等) ，虽然其它的语言特性 ~可以~ 非常强大，我们发现经验没那么丰富的 LESS 开发者很容易陷入麻烦。我们同时选择了纯 CSS 的视觉审美（也包括它提供的一致性）并且觉得我们的代码库向着这样的方向发展。
+- Classes 和 IDs 都是小写字母，中划线分割单词－这正是我们在 Bootstrap, Skeleton, Ratchet, 等等定义选择器的方式，我们认为我们在这里也可以一样这样做。另外一个原因是，这种定义方式遵循了 CSS 语言自身的定义方式，比如：border-radius-top-left 等。
+- 选择 components 而不是 page 层面的样式－我们希望我们的前端更像是一个库，根据这样的想法，我们将 profile.less 拆分成更加具体的文件，例如：button.less, dialog.less,tooltip.less 等。
+
+以下是完整的样式指引：
+[https://gist.github.com/fat/b27700946c777adacdf4](https://gist.github.com/fat/b27700946c777adacdf4)
+
+这并不完美，但是它理清了一些基础的思路，然后带领我们向着感觉上正确的方向前进。
+
+不幸的是，在样式指引更新之后，人们依然非常纠结，什么时候需要定义组件，什么时候需要定义子组件等等。并且我们偶尔会碰到一些并不很具体的东西，例如 classname：.nav-on-light-background-button 或者 .button-primary-sidebar-over-blur.
+
+现在人们不再使用 page 级别的前缀来定义 class 了（这是很好的），但是它们开始使用中划线间隔拼接很多任意单词，组成 classname。进化的情况如下：.button → .button-primary → .button-primary-dark → .button-primary-dark-container → .button-primary-dark-container-label，真是让人不舒服。
+
+## Project 4: 确定未来
+当时，我开始以成为世界上最好代码为目标在 Medium 内部写了 ~很多~ 的 CSS 代码。我并不是非常清楚最好的到底是什么样子，但是我明白了，当时的方向并不成功。
+
+> 人们感到很困惑，更糟糕的是，他们以为自己写的 CSS 非常好，实际上却不是这样。
+
+所以，我开始四处观察－－了解一些框架，尝试不同的工具和哲学，与朋友沟通，与朋友的朋友沟通，等等。很快，我找到三个需要解决的问题，解决他们可以让我们的 CSS 代码向着应该的方向前进。
+
+1. 引入新的 CSS variable, mixing, 和 classname 语义来避免过长的 classnames 以及增强可读性。
+2. 从 LESS 转到 Rework 来获得更强的 mixin support 和更佳接近于原生 CSS 的语法。
+3. 引入 CSS 性能（加载时间，fps，layout time 等）工具，使跟踪样式修改以及回归更加简单。
+
+## Project 5: 语义
+我想要给我们的代码库一个更加严格的语义化标砖。因为对于一个我们这种打小的团队，我觉得拥有一个可以依靠的规则是更简单的。并且我宁愿让事情变得更复杂一点，尽管这也意味着人们必须在创建新的 classes 的时候要更加留神。不惜一切代价，我希望能够避免过长的 classname，或者至少没那么容易出现。
+
+我开始就这个问题，与 Daryl Koopersmith 以及我的好朋友 Nicolas Gallagher 进行了长时间的讨论。
+
+Nicolas 跟我的关系很有趣，Nicolas 经常告诉我一些事情，我说他是错的，叫着他的法语名字（Va te faire foutre, enculé），然后在他身边得瑟几周，直到不可避免的意识到他是对的，然后把他的想法划归我自己。
+
+这一次也是一样，经过几个漫长的夜晚，我终于完成了一个与 Nicolas 的 SUITCSS 很像的语义化样式。很像，但是 ~一丢丢~ 更好。
+
+于是，我开始抄袭 Nicolas 的东西，我扔掉了就的样式指引，然后复制粘贴了他的很大一部分，左改改，右改改。
+
+最终，我产出了我们当前使用的最新的样式指引，你可以在下面完整的阅读它，主要的更新是：
+
+- **.js-** 开头的 class names 代表依赖 javascript 选择器的元素
+- **.u-** 开头的 class name 单独目的的工具类，例如 .u-underline, .u-capitalize, 等等
+- 引入有意义的连字符以及驼峰－－区分 component, descendant components, 和 modifiers 的间隔符。
+- **.is-** 开头的 classes 表示有状态的 classes (经常被 js 切换) 例如 .is-disabled
+- 新的 CSS 变量语义： [property]-[value]—[component]
+- mixing 限制为只用在 polyfills 并且以 **.m-** 开头
+
+[https://gist.github.com/fat/a47b882eb5f84293c4ed](https://gist.github.com/fat/a47b882eb5f84293c4ed)
+
+复制粘贴样式指引是一回事，而重写你的 CSS 应用是另一回事。
+
+庆幸的是我可以说服公司这个项目的重要性，然后他们给予了 2½ 周的时间让我们重写 Medium.com 的所有 CSS－－如果你一直在关心我们的话，这只是我们[修复 CSS underline 问题](https://medium.com/designing-medium/crafting-link-underlines-on-medium-7c03a9274f9)所花费时间的很小一部分。
+
+也就是说，这次重写不只是宣泄，我们清理了一些比没用的样式，手机和整理了整个网站的实现，将文件拆解成小的子模块，让我惊喜的是，只造成了五次以内的回滚。
+
+当然，重构 CSS 意味着重构我们的模版－－增加更多的封装和严格的语义化。现在我们不再有数以百计的使用随机 avatar classes 的一次性 <IMG> 标签，我们使用一个单独的集中式 avatar 模版，模版接受布尔选项，来出发不同的 modifiers 比如大小，样式等等。这让更新样式变的简单，而已实现细节时引入更少的 Bug。
+
+## Project X: 未来？
+毫无疑问，我们比两年之前变的更好了。在 Medium 写 CSS 变的非常愉快，不同经验的开发者们也在促进更加伟大的东西。
+
+大家都说，未来的 CSS 项目必须是关注性能。随着我们不断的完善我们的故事，然后推向下一个阶段，你可以想象怎样精确可靠的测量 layout 和 渲染性能是非常重要的。
 
+所以，还要更多的事情要做，但是我现在感觉我们已经非常好了，比我平时想的都要好。
 
+为你完成了这个又长又无聊的 post 欢呼。
 
+感谢 Katie, Dave, Mark, Koop, Kristofer, Nicolas 以及其它帮助我的人❤。