CSS最佳实践

发布于：2025-03-14 ⋅ 阅读:(20) ⋅ 点赞:(0)
  • 建议大家在根元素声明所有需要使用到的样式，例如字体、颜色、大小等，这样你在书写盒子样式的时候会比较方便（自定义属性一般都是语义化标签）
  • 尽量使用相对单位（例如em），在html设置字体大小，其他盒子使用相对单位，这样你可以通过调整html的字体大小来达到调整所有字体的目的
  • 自顶向下书写css样式，养成良好习惯，配合@media媒体查询实现响应式布局

:root

:root 这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示<html>元素，除了优先级更高之外，与html 选择器相同。

/* 选择文档的根元素（HTML 中的 <html>） */
:root {
  background: yellow;
}

声明全局 CSS 变量

在声明全局 CSS 变量时 :root 会很有用：

:root {
  --main-color: hotpink;
  --pane-padding: 5px 42px;
}

使用 CSS 自定义属性

  • 自定义属性是由 CSS 作者定义的，它包含的值可以在整个文档中重复使用
  • 由自定义属性标记设定值（比如： --main-color: black;）
  • 由 var() 函数来获取值（比如： color: var(--main-color);）
  • 自定义属性在某个地方存储一个值，然后在其他许多地方引用它
  • 另一个好处是语义化的标识。比如，--main-text-color 会比 #00ff00 更易理解
  • 自定义属性受级联的约束，并从其父级继承其值

基本用法

声明一个自定义属性，属性名需要以两个减号（--）开始，属性值则可以是任何有效的 CSS 值

和其他属性一样，自定义属性也是写在规则集之内的，如下：

element {
  --main-bg-color: brown;
}

注意，规则集所指定的选择器定义了自定义属性的可见作用域。

通常的最佳实践是定义在根伪类 :root下，这样就可以在 HTML 文档的任何地方访问到它了：

:root {
  --main-bg-color: brown;
}

注意

自定义属性名是大小写敏感的，--my-color 和 --My-color 会被认为是两个不同的自定义属性

Var()函数

如前所述，使用一个局部变量时用 var() 函数包裹以表示一个合法的属性值：

element {
  background-color: var(--main-bg-color);
}

自定义属性的继承性

自定义属性会继承。这意味着如果在一个给定的元素上，没有为这个自定义属性设置值，在其父元素上的值会被使用。

<div class="one">
  <div class="two">
    <div class="three"></div>
    <div class="four"></div>
  </div>
</div>

.two {
  --test: 10px;
}

.three {
  --test: 2em;
}

在这个情况下， var(--test) 的结果分别是：

  • 对于元素 class="two" ：10px
  • 对于元素 class="three" ：2em
  • 对于元素 class="four" ：10px （继承自父属性）
  • 对于元素 class="one" ：非法值，会变成自定义属性的默认值

注意，这些是自定义属性，并不是你在其他编程语言中遇到的实际的变量。这些值仅当需要的时候才会计算，而并不会按其他规则进行保存。

自定义属性备用值

用 var()函数可以定义多个备用值（fallback value），当给定值未定义时将会用备用值替换。

备注： 备用值并不是用于实现浏览器兼容性的。如果浏览器不支持 CSS 自定义属性，备用值也没什么用。它仅对支持 CSS 自定义属性的浏览器提供了一个备份机制，该机制仅当给定值未定义或是无效值的时候生效。

  • 函数的第一个参数是自定义属性的名称。
  • 如果提供了第二个参数，则表示备用值
  • 当自定义属性值无效时生效。第二个参数可以嵌套，但是不能继续平铺展开下去了
.two {
  color: var(--my-var, red); /* Red if --my-var is not defined */
}

.three {
  background-color: var(
    --my-var,
    var(--my-background, pink)
  ); /* pink if --my-var and --my-background are not defined */
}

.three {
  background-color: var(
    --my-var,
    --my-background,
    pink
  ); /* Invalid: "--my-background, pink" */
}

第二个例子展示了如何处理一个以上的 fallback。该技术可能会导致性能问题，因为它花了更多的时间在处理这些变量上。

JavaScript 中的值

在 JavaScript 中获取或者修改 CSS 变量和操作普通 CSS 属性是一样的：

// 获取一个 Dom 节点上的 CSS 变量
element.style.getPropertyValue("--my-var");

// 获取任意 Dom 节点上的 CSS 变量
getComputedStyle(element).getPropertyValue("--my-var");

// 修改一个 Dom 节点上的 CSS 变量
element.style.setProperty("--my-var", jsVar + 4);

最佳单位实践

1. px（像素）

  • 描述：绝对单位，基于显示设备的物理像素点。尽管称为“像素”，但在高分辨率屏幕上可能会有所不同。
  • 特点：
    • 提供了精确的尺寸控制。
    • 不随浏览器设置或父元素字体大小的变化而变化。
  • 适用场景：当你需要固定的、不可缩放的尺寸时使用，例如细线边框、图标大小等。
div {
  width: 200px; /* 固定宽度 */
}

2. em

  • 描述：相对单位，相对于当前元素的字体大小。如果父元素设置了字体大小，则 em 的值基于该字体大小计算。
  • 特点：
    • 允许根据文本大小调整布局。
    • 如果嵌套元素较多，可能导致复杂度增加，因为每个层级的字体大小都会影响下一层级。
  • 适用场景：适用于希望随着父元素的字体大小变化而变化的设计部分，如段落、标题等。
p {
  font-size: 1.5em; /* 相对于父元素字体大小放大1.5倍 */
}

3. rem（root em）

  • 描述：类似于 em，但它是相对于根元素（即 <html> 标签）的字体大小来计算。
  • 特点：
    • 简化了响应式设计中的尺寸管理，因为它只依赖于根元素的字体大小。
    • 避免了 em 可能导致的嵌套层级问题。
  • 适用场景：非常适合用于整个页面的基础布局和排版，因为它提供了更一致的尺寸关系。
html {
  font-size: 16px;
}

div {
  font-size: 1.2rem; /* 相对于根元素字体大小放大1.2倍 */
}

4. vw 和 vh（视窗宽度和高度百分比）

  • 描述：1vw 等于视口宽度的 1%，1vh 等于视口高度的 1%。
  • 特点：
    • 动态地适应用户的屏幕尺寸。
    • 特别适合创建全屏或基于视口比例的设计。
  • 适用场景：当需要设计能够自适应不同屏幕尺寸的内容时非常有用，比如全屏背景图、响应式布局等。
div {
  width: 50vw; /* 占据视口宽度的一半 */
  height: 30vh; /* 占据视口高度的30% */
}

5. %（百分比）

  • 描述：相对单位，相对于包含块（通常是父元素）的宽度或高度。
  • 特点：
    • 提供了一种灵活的方式来定义元素大小，使其可以根据其容器大小自动调整。
    • 可以应用于宽度、高度、内边距、外边距等多个属性。
  • 适用场景：流体布局中，尤其是那些需要根据父容器大小动态调整自身大小的元素。
div {
  width: 80%; /* 占据父元素宽度的80% */
}

6. fr（网格分数单位）

  • 描述：仅在 CSS Grid 布局中使用的单位，表示可用空间的一部分。
  • 特点：
    • 提供了一种简单的方法来分配网格轨道的空间。
    • 可以轻松创建复杂的网格布局。
  • 适用场景：在构建基于网格的布局时，用于定义行和列的大小。
.container {
  display: grid;
  grid-template-columns: 1fr 2fr; /* 第二列是第一列宽度的两倍 */
}

@media

@media CSS@规则可用于基于一个或多个媒体查询的结果来应用样式表的一部分。使用它，你可以指定一个媒体查询和一个 CSS 块，当且仅当该媒体查询与正在使用其内容的设备匹配时，该 CSS 块才能应用于该文档。

备注： 在 JavaScript 中，可以使用 CSSMediaRuleCSS 对象模型接口访问使用 @media 创建的规则。

语法

@media at 规则可置于你代码的顶层或嵌套至其他任何的 at 条件规则组中。

/* 在你的代码的顶层 */
@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}

/* 嵌套至其他的 at 条件规则中 */
@supports (display: flex) {
  @media screen and (min-width: 900px) {
    article {
      display: flex;
    }
  }
}

媒体类型

媒体类型（media type）描述设备的一般类别。除非使用 not 或 only 逻辑运算符，否则媒体类型是可选的，并且会（隐式地）应用 all 类型。

  • all

    适用于所有设备

  • print

    适用于在打印预览模式下在屏幕上查看的分页材料和文档

  • screen

    主要用于屏幕

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布