CSS 剃刀

哲学中的“剃刀”是一种方法论原则，通过消除不必要的假设或选项来帮助简化复杂的选择。

最著名的是奥卡姆剃刀，它建议不要在不必要的情况下增加实体或假设：选择最简单、有效的解释。

应用于CSS，这个想法建议简化我们的样式属性选择，以简单有效的方式设计页面，采用解决布局问题的技术，而无需不必要的复杂性。

将哲学剃刀应用到 CSS 上，就是选择最简单、最有效的解决方案来解决布局问题，而不用不必要的规则使代码过载。以下是如何有效地构建 CSS 属性选择，采用渐进式方法来保持简单性，同时处理复杂的布局要求：

优先考虑正常流程

正常流程是 HTML 元素在页面上排列的自然方式，无需任何特定干预。它是最简单的基础，应该是您构建布局的起点。

• 块：块级元素（例如
  、

  、

  等）垂直堆叠，占据全部可用宽度。

• 内联：内联元素（例如、）沿着文本的水平流彼此相邻排列。

始终首先看看是否可以通过简单地使用这些自然行为来完成基本布局。例如：

• 仅在内容就位后才使用容器或图像的 max-width 或 max-height 调整尺寸。
• 使用版式属性（字体大小、行高等）来组织内容。

必要时切换到 Flexbox 或 Grid

当正常流程不够时，Flexbox 和 CSS Grid 是处理更复杂布局的强大工具。深思熟虑地使用它们，避免结构中不必要的复杂性：

• Flexbox 非常适合 一维 布局（行或列）：

  • 例如，要使元素在容器内水平和垂直居中，请使用 display: flex 和 justify-content: center;对齐项目：居中；就足够了。
  • Flexbox 擅长简单布局，其中元素之间的关系是线性的（例如，导航栏、对齐卡片等）。

• CSS 网格 更适合二维 布局（按行和列排列元素）：

  • 使用网格进行更复杂的布局，例如图片库或数据表。
  • 对于需要同时控制行和列的布局，Grid 比 Flexbox 更强大。

这个想法是仅在达到正常流程的极限时才引入 Flexbox 或 Grid，避免在没有真正需要的情况下在任何地方应用它们。

有关更多详细信息，请查看 Josh Comeau 的这些优秀指南：

• Flexbox 交互式指南。
• CSS 网格交互式指南。

带内边距和边距的句柄间距

要组织元素之间的空间，必须了解 padding 和 margin 之间的差异，并有条不紊地应用这些属性：

• 填充：管理元素内部元素内容与其边框之间的空间。使用内边距在内部内容和容器边缘之间添加空间，例如在按钮或卡片中。

• 边距：管理元素外部元素边框和周围元素之间的空间。使用边距将流中的元素彼此分开。

一般来说，内部空间使用填充，外部空间使用边距。使用边距来控制独立元素之间的间距并预留填充来调整容器元素内部的空间通常会更清晰。

请参阅 Nathan Curtis 撰写的这篇文章以获取视觉证明：设计系统中的空间。

使用位置值进行分层

CSS 中的定位允许更动态的布局，但重要的是要避免过度使用它们。以下是如何在不同位置值之间进行选择的方法：

• position: static（默认）：元素根据正常流定位。

• 位置：相对：元素保持在正常流中，但可以偏离其原始位置。当您想要稍微移动某个元素而不影响其他元素的流动时，请使用它。

• 位置：绝对：元素从正常流中删除，并相对于其第一个定位祖先（位置为：相对、绝对或固定）定位。它对于对元素进行分层或在容器内精确定位某些内容而不影响其他元素非常有用。

• 位置：固定：与绝对类似，但元素相对于浏览器窗口定位并在滚动时保持固定（例如粘性导航栏、弹出窗口）。

• position: Sticky：相对和固定的混合，它允许元素停留在流中，直到满足特定条件（例如，当它到达特定的滚动点时，它变得固定）。它对于像导航栏这样需要在滚动后保持可见的东西很有用。

对于普通流程和 Flexbox/Grid 无法满足要求的特定情况，明智地使用定位。

具体示例：Flexbox 解决的粘性页脚。

为流畅且响应式的布局选择适当的尺寸

为了确保布局保持流畅和响应灵敏，请使用灵活的单位，例如：

• %：百分比相对于父容器的大小，允许元素适应不同的屏幕尺寸。
• em 和 rem：这些单位相对于父元素的字体大小（或根元素的 rem 大小）。它们非常适合创建自适应尺寸，特别是间距（边距、填充）和 100% 以外的尺寸（宽度、高度）。
• vw 和 vh：这些单位与浏览器窗口大小相关（1 vw = 窗口宽度的 1%，1 vh = 高度的 1%）。将它们用于适应整个屏幕尺寸的布局。

除非绝对必要，否则避免使用 px 等固定单位，以确保设计在不同设备上保持流畅。

一个很好的用例：流体排版。

我的 CSS Razor 简而言之

1. 从正常流程开始：使用块和内联元素构建布局基础，只需调整显示、宽度、高度。
2. 谨慎使用Flexbox或Grid：当正常流程不足时，切换到Flexbox进行一维布局，或者切换到Grid进行更复杂的二维布局。
3. 智能地处理间距：使用边距将元素分开，并使用填充来管理容器内的空间。
4. 根据需要定位元素：使用相对进行细微调整，使用绝对或固定来调整正常流程之外的元素，并保持其他所有内容静态。
5. 优先考虑流体单位：使用 %、em、rem、vw 和 vh 等相对单位来确保布局流畅且适应性强。

通过遵循这种有条不紊的方法并尽可能地简化，您将能够设计有效的页面，而不会陷入过度复杂的陷阱，同时确保代码的可维护性。

你的 CSS 剃刀是什么？

以上是CSS 剃刀的详细内容。更多信息请关注PHP中文网其他相关文章！