[译] CSS 思惟模式

时间 2019-11-08

标签 css 思惟模式栏目 CSS 繁體版

原文原文链接

原文地址：The CSS Mindset

原文做者：Max Böck

译文出自：掘金翻译计划

本文永久连接：github.com/xitu/gold-m…

译者：MarchYuanx

校对者：solerji, Chorer

CSS 思惟模式

啊，是的，CSS。它几乎每一个星期都是网络上热议的话题。它太难了。它太简单了。它没法预测。它过期了。此处应该有一张 Peter Griffin 折腾百叶窗的恶搞图。css

我不知道为何 CSS 会在开发者中激发出如此多的不一样情绪，但我有一种直觉，为何有时候它看起来不合逻辑或使人沮丧：你须要一种特定的思惟模式才能写出好的 CSS。前端

如今，您可能须要一个编码的思惟模式，但 CSS 的声明性使其特别难以掌握，尤为是当您用“传统”编程语言的思惟来思考它的时候。android

其余编程语言一般在受控的环境中工做，例如服务器。它们但愿某些条件始终为真，从而做为程序应该如何执行的具体指令。ios

另外一方面，CSS 在一个永远没法彻底可控的地方工做，因此默认状况下它必须是灵活的。它不只仅用于“编写外观”，还用于将设计转换为一组传达其背后意图的规则。留出足够的空间，浏览器将为您完成繁重的工做。git

对于大多数专业编写 CSS 的人来讲，他的思惟模式在一段时间后天然而然地造成了。在事情终于有成效的时候，许多开发者都有那样一个“啊哈！”的时刻。这不只仅是了解全部技术细节，更多的是关于语言背后的思想的一种感受。github

我试着在这里列出一些思惟模式。编程

全都是矩形

这看起来很明显，由于盒子模型多是人们学习 CSS 的时候接触到的第一个东西。可是将每一个 DOM 元素描绘成一个盒子对于理解事物布局方式相当重要。它是内联的仍是块级的？它是弹性的吗？它将如何在不一样的环境中拉伸/收缩/包裹？后端

打开你的开发者工具并将鼠标悬停在元素上，观察它们绘制的盒子。或使用像 outline: 2px dotted hotpink 这样的显式样式来显示其隐藏的边框。数组

级联是你的朋友

级联 —— 一个可怕的概念，我懂。在镜子前说三次“级联”，在某个地方，一些不相关的样式会失效。浏览器

虽然有合理的理由避免级联，但这并不意味着它的一切都是很差的。事实上，若是使用得当，它可让您的生活更轻松。

重要的是要知道哪些样式属于全局做用域，哪些样式更适合于组件。它还有助于了解传递的默认值，避免声明没必要要的样式规则。

尽量必要，尽量少

旨在编写实现设计所需的最少许的代码。较少的属性意味着更少的继承、更少的限制和更少的覆盖带来的麻烦。想一想你的选择器应该作什么，而后尝试就那样表达它。在已是块级别的元素上声明 width: 100% 是没有意义的。若是您不须要新的堆叠上下文，则无需设置 position: relative。

避免没必要要的样式，你就避免了意外后果。

简写有很大的影响

一些 CSS 属性能够用“简写”方式书写，这使得一块儿声明一组相关属性成为可能。虽然这很方便，请注意，使用简写还将为未显式设置的每一个属性声明默认值。写上 background: white; 将有效地致使全部这些属性被设置：

background-color: white;
background-image: none;
background-position: 0% 0%;
background-size: auto auto;
background-repeat: repeat;
background-origin: padding-box;
background-clip: border-box;
background-attachment: scroll;
复制代码

样式最好是明确的。若是要更改背景颜色，请使用 background-color。

永远要灵活

CSS 处理大量未知的变量：屏幕大小、动态内容、设备功能 —— 这个列表还在继续。若是你的样式过于狭隘或受限，那么这些因素中的某一个极可能会让你栽跟头。这就是为何写好 CSS 的一个关键方面就是接受它的灵活性

你的目标是编写一套足够全面的指令来描述你想要实现的页面，但足够灵活，让浏览器本身理解清楚怎么作。这就是为何一般最好避免 “神奇数字”。

神奇数字是随机的固定值。好比：

.thing {    width: 218px; /* why? */}
复制代码

每当你本身在开发工具中点击箭头键并调整一个像素值使之适合的时候 —— 均可能会有一个神奇数字。它们不多能解决 CSS 问题，由于它们将样式限制在特定的使用案例中。若是约束发生变化，那么该数字将会失效。

相反，想一想在那种状况下你真正想要实现什么。对齐？宽高比？分配等量的空间？全部这些都有灵活的解决方案。在大多数状况下，最好为目的定义一个规则，而不是采用硬编码的计算方案。

语境是关键

对于许多布局概念，必须了解元素与其容器之间的关系。大多数组件是父节点和子节点的集合。应用于父级的样式会影响子孙级，这可能会使它们忽略其余规则。弹性盒子，栅格布局和 position: absolute 是此类错误的常见来源。

当疑惑某个特定元素的表现与您指望的不一样时，请查看它所在的上下文。多是它祖先级的某些因素影响了它。

内容会改变

始终要注意，您所看到的只是在大范围中的一种 UI 状态。不要在屏幕上设置样式，而是尝试构建组件的“蓝图”。而后确保不论你把它放在什么场景，都不会使你的样式失效。

字符串可能比预期长或包含特殊字符，图像可能缺失或具备奇怪的尺寸。显示的样子可能很是窄或很是宽。这些都是您须要预测的状态。

设计师和开发者犯的第一个错误就是假设事情老是像它们在静态模型中那样。我能够向你保证，它们不会。

发现模式并复用它们

当您打算将设计模型实现为代码时，首先盘点出所包含的不一样模式一般颇有帮助。分析每一个屏幕的场景，注意任何出现一次以上的概念。它多是一些小的东西，好比排版样式，或者大的东西，好比某种布局模式。

什么能够抽象？什么是特有的？将设计中的各个部分视为独立的东西使它们更易于理解，并有助于划分组件之间的界限。

使用一致的命名

总的来讲，至关多的一部分程序有不错的命名。在 CSS 中，它有助于遵照约定。像 BEM 或 SMACSS 这样的命名方案很是有用；但即便你不使用它们，也要坚持使用一致的词汇。

👉 免责声明
全部这些对我来讲都是很重要的，可是基于你的我的经历，什么最重要多是不一样的。你有没有你的“啊哈”时刻让你更好地理解 CSS？告诉我！