五种老式的CSS做法应该避免了

在之前的一篇文章里，我写过关于HTML中的一些过时的习惯，这些习惯人们现在还常常使用。现在让我们来谈谈一些过时的CSS属性和技术，以及如何将它们更新到现代化。

照片由 Lavi Perchik 在 Unsplash 拍摄

当我们大家用 CSS 的 float 属性时，那段好时光已经过去了。

自从所有的现代浏览器开始支持 flex 和 grid 属性以来，我就没理由继续使用 float 了。

让我们做一个简单的页面布局，包括侧边栏和内容区域。

这里就是用了浮动布局的版本：

浮动布局示例

使用 float 属性的主要缺点是，元素会被移出正常的页面布局。因此，如果我们对 <aside> 和 <article> 元素都使用 float，它们的父元素 <main> 的高度就会变成零。

所以，如果不给 <footer> 元素添加 clear: both; 样式，页面会看起来像这样：

浮动布局的问题.

如果你想为<main>元素设置高度值，可以使用如下所示的老方法（这也会固定页脚）。

    <div class="clearfix"></div>

使用 CSS 的 .clearfix 类，例如：

    .clearfix {
      clear: both;
    }
    /* 清除浮动 */

这样的简单布局，你觉得修复的问题和bug太多了，不是吗？

幸亏，我们有一个Flexbox布局方法。

我们来以一种现代且更加方便的方式重新布局我们的界面：

Flexbox 布局演示页面

我们的侧边栏现在会跟着内容区域一起拉到底啦！

不用多余的divs

我最喜欢的部分是自动响应性！只需在父元素（如示例中的 <main>）上添加 flex-wrap: wrap;，并为 <aside> 元素设置一个固定的 flex-basis 值（如示例中为 15rem）。尝试调整上面示例的大小，你就能看到这样的效果。

自动适应页面布局的动画

在我的文章中了解更多关于自动回复的更多技巧

我经常使用 Bootstrap 框架。也许你还记得你在 HTML 代码里用过的那些 col-md-4 col-lg-5 col-sm-3 类。但 Bootstrap 给我带来的一大困扰是，它会给列容器添加 padding-left 和 padding-right 值以在它们之间创建间隔。

列布局中的列边距

这样会让这一行的大小小于外部布局，因此需要给该行自身添加负边距来调整。

这样你可以轻松使用CSS 网格布局 创建宽度相等的列布局，

    .row {  
      显示: 网格;  
      间距: 15px;  
      网格模板列: 重复(3, 最小最大(0, 1fr));  
    }

网格布局定义了一个名为.row的类，其中display: grid;表示该元素将使用网格布局。gap: 15px;设置行和列之间的间距为15像素。grid-template-columns: repeat(3, minmax(0, 1fr));定义了三列，每列的宽度至少为0，最大为1fr（即可用空间的1份）。

这种方法也被称为RAM技术。请参阅以下文章以了解详情：

让我们再回到之前的例子。为了让列在较小屏幕上堆叠，我们通常会添加许多断点，通过媒体查询来定义。例如，我们可能会添加类似这样的断点:

如果列达到最小宽度值时能自动堆叠起来，不是很好吗？

之前提到了RAM方法，现在让我们好好利用它吧。

使用网格布局；模板列会自动适应，每列至少15em，最多占一个柔性单位（1fr）；

好了！

RAM：演示

给链接加上下划线是最佳（也是最古老）的方式。这就像在说：“嘿，我不是普通的文字，我是链接！你可以点击我！”

它也对可访问性有很大影响！视力不佳的人可能会忽略文章中稍微加粗或变浅的链接。

我不是在说你页面上的所有链接，而是。如果是导航部分（比如顶部或底部菜单）的链接，不给它们加下划线也是可以的。

但在文章中的链接或一些你可能不会预料到的地方（比如表单内），它们必须被下划线标出！

我经常看到开发者将 text-decoration: none; 默认应用于所有链接，相反，他们会使用伪类来添加下划线。

    a {  
      position: 相对;  
    }  
    a::after {  
      position: 绝对;  
      content: "";  
      height: 1px;  
      width: 100%;  
      bottom: -5px;  
      left: 0;  
      right: 0;  
      margin: 0 auto;  
      background: #3f567e;  
    }

或者有下边框：

a {  
  border-bottom: 1px solid #3f567e;  /* 这里我们给链接加一个深蓝色的下边框 */
}

得益于现代CSS属性，我们可以按照我们的需求自定义下划线。

这是它们：

• 文本装饰线（text-decoration-line）：定义文本修饰线的样式。
• 文本装饰跨越墨迹（text-decoration-skip-ink）：定义文本修饰跳过墨迹的行为。
• 文本装饰样式（text-decoration-style）：定义文本修饰的样式。
• 文本装饰厚度（text-decoration-thickness）：定义文本修饰线的厚度。
• 文本装饰颜色（text-decoration-color）：定义文本修饰的颜色。
• 文本下划线位置（text-underline-position）：定义文本下划线的位置。
• 文本下划线偏移（text-underline-offset）：定义文本下划线的偏移量。

想了解更多关于这些属性的内容，你可以阅读 MDN网站上的技术文档：https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration

不过，这里有个快速演示，你可以试试。

CSS文本装饰属性示例

得益于 [transform](https://developer.mozilla.org/en-US/docs/Web/CSS/transform) 这个 CSS 属性，页面上的元素变得非常容易变换。因此，由于该属性不会触发任何布局或绘制步骤（在 渲染管道 中），你可以仅用 CSS 实现平滑动画！

transform 属性可以让你旋转、缩放、扭曲或平移一个元素。它利用适当的方法来实现这些效果。因此，当属性里堆叠了太多功能时，就变得难以阅读和修改它们。

我的意思是这样的：

.some-class 样式中应用了以下 CSS 变换：

- 透视效果为 500px；
- 位移为 (10px, 0, 20px)；
- 绕 Y 轴旋转 3 度；
- 三维缩放比例为 (2.5, 1.2, 0.3)。

如果你想在鼠标悬停时仅重写 rotateY，

/* 当鼠标悬停在 .some-class 元素上时，使用 perspective(500px) 来进行变换，然后进行 10px 水平位移、0px 垂直位移、20px Z 轴位移，接着绕 Y 轴旋转 20 度，最后在 3D 空间中按 2.5、1.2、0.3 的比例缩放。*/

所以你必须保留所有这些值，并复制这些值，只调整 rotateY 的值。

从2022年开始，我们就可以使用独立CSS属性来变换元素的位置或形状。

这些属性包括：

• [translate] (转换)
• [rotate] (旋转)
• [transform] (变形)
• [scale] (缩放)
• [perspective] (透视)

注意，偏斜不是一个独立的变换参数。

为了让之前的例子更易读，我们可以这样重写它：

    .some-class {  
      /* 让元素看起来有3D透视效果，距离为500像素 */
      perspective: 500px;  
      /* 把元素在X轴上移动10像素，在Z轴上移动20像素 */
      translate: 10px 0 20px;  
      /* 让元素绕着Y轴旋转3度 */
      rotate: y 3deg;  
      /* 在X轴上放大2.5倍，在Z轴上缩小到原来的0.3倍 */
      scale: 2.5 1.2 0.3;  
    }

为了重写 rotateY 的值，我们只需要改变这个特定的属性。

.some-class:hover {  
  rotate: y 20deg;  
}

在使用单独的变换属性时，需要注意一些重要的变化：

• 就像在其他的 CSS 属性里一样，使用空格来分隔值，而不是逗号。逗号仅用于函数（translate: 10px 0 20px;）！
• 但在属性名中不能使用修饰符（比如只能使用 rotate，而不能使用 rotateY）。不过别担心，你仍然可以单独修改一个值（例如 rotate: y 3deg;）。关于如何使用单个或多个值的信息，请参阅 MDN 上相应属性的文档。

今天的分享就到这里吧！你觉得我有没有漏掉什么？你还在等哪个 CSS 属性变得流行吗？来评论区说说你的想法吧 ;)

如果你没看到我的关于7个传统HTML技巧的文章：

如果你觉得这篇文章有趣或有帮助 — 请赶紧点个赞，关注一下，并在评论区留言 😊

感谢你的阅读！
保重，祝你平安！