【译】改善 CSS 的 10 个最佳实践

最新推荐文章于 2024-04-10 00:52:22 发布
最新推荐文章于 2024-04-10 00:52:22 发布
阅读量404 收藏
点赞数
分类专栏： 样式编码规范 文章标签： css
原文链接：https://mp.weixin.qq.com/s/Q105WuhKemVOq9AMppFluQ
版权
图片

CSS 看起来是一种非常直接且不易犯错的语言。只需要添加规则以对网站进行样式设置就可以了，对吗？对于只需要几个 CSS 文件的小型站点，可能是这种情况。但是在大型程序中，这样可能会使样式迅速失控。如何让它们更可控？

事实是，就像其他任何语言一样，CSS的细微差别可以使你的设计有天壤之别。这是 CSS 的 10 条技巧 —— 可以帮助你从样式中获得最大收益的最佳实践。

1. 你真的需要框架吗？

首先，确定你是否真的需要使用 CSS 框架。现在有许多轻量级的方法可以替代繁重的框架。通常，你不会使用框架中的每个选择器，因此你的程序中会包含冗余代码。

如果你只需要使用按钮的样式，将它们复制到你自己的 CSS 文件中，然后删除其余的样式。另外，你可以使用开发者工具中的代码覆盖率检测来识别未使用的 CSS 规则。

图片

要打开它，请在“工具”面板中搜索 Coverage。您可以通过单击 Ctrl + Shift + P 来打开工具面板。打开后，单击重新加载图标开始录制。所有显示红色的内容都是没有使用的。

你可以在上面的例子中看到，它表示了 98% 的 CSS 都没有被使用。请注意，实际上并非如此 —— 某些 CSS 样式仅在用户与网站互动后才应用。移动设备的样式也会被标记为未使用。因此，在删除所有内容之前，请确保这些样式确实没有在任何地方使用。

2. 选用一套 CSS 规范

考虑为你的项目使用一套 CSS 规范。CSS 规范使 CSS 文件具有一致性。它们有助于扩展和维护您的项目。这里有一些我推荐的 CSS 规范。

BEM

BEM —— Block（块）、Element（元素）、Modifier（修饰符）—— 是最流行的 CSS 规范之一。它是一组命名约定，你可以使用它们轻松地设计可复用组件。命名约定遵循以下模式：

.block { ... }
.block__element { ... }
.block--modifier { ... }
  • .block：块代表一个组件。它们是独立的实体，并且对自身有意义。
  • .block__element：这些是 .block 的一部分。它们没有独立的含义，必须绑定到一个块上。
  • .block--modifier：它们被用作块或元素的标志。我们可以使用它们来改变元素的外观、行为或状态。例如，要使用隐藏标记，我们可以命名为 .block--hidden。
ITCSS

倒三角 CSS 通过引入不同的层来实现不同的特性，帮助你更好地组织你的文件。你走得越深，就越具体。

图片
OOCSS

Object-oriented CSS 或 OOCSS 遵循两个主要的原则。

「分离结构和视觉效果」

这意味着你要将视觉效果与结构代码分开定义。这在实践中意味着什么？

/* 待优化的内容  */
.box {
    width: 250px;
    height: 250px;
    padding: 10px;
    border: 1px solid #CCC;
    box-shadow: 1px 2px 5px #CCC;
    border-radius: 5px;
}

/* 优化后 */
.box {
    width: 250px;
    height: 250px;
    padding: 10px;
}

.elevated {
    border: 1px solid #CCC;
    box-shadow: 1px 2px 5px #CCC;
    border-radius: 5px;
}

「分隔容器和内容」

这意味着你不希望任何元素依赖于它的位置。相同的元素无论在页面的什么位置看起来都应该是相同的。

/* 待优化的内容 */
.main span.breadcumb { ... }

/* 优化后 */
.breadcrumb { ... }

3. 设置预处理器

设置预处理器可以在很多方面给你带来好处。预处理器是一种工具，它允许你使用 CSS 中不存在的高级特性。这些特性可能是循环变量甚至函数之类的东西。

现在有很多预处理器。最著名的三个大概是 Sass、Less 和 Stylus。我建议使用 Sass，因为它有一个成熟的社区，而且你可以在网上找到大量关于它的文档。

那么，预处理器能提供什么帮助？

更好地组织样式

预处理可以帮你更好地组织样式。它们能够将你的文件拆解成更小的可复用文件。它们可以相互导入，或者分别导入你的应用。

// 为一个 SCSS 文件导入不同的模块
@import 'settings';
@import 'tools';
@import 'generic';
@import 'elements';
@import 'objects';
@import 'components';
@import 'trumps';
嵌套选择器

另一种增强可读性的好方法是嵌套选择器。这是一个简单而强大但 CSS 所缺少的功能。

.wrapper {
    .sidebar {
        &.collapsed {
            display: none;
        }
        
        .list {
            .list-item {
                ...
                
                &.list-item--active {
                    ...
                }
            }
        }
    }
}

分层结构使我们更加清晰的看出不同元素的结合关系。

自动为你的规则添加前缀

CSS 中有一些非标准或实验性功能的前缀。不同的浏览器为其使用不同的前缀，例如：

  • -webkit-：适用于基于 WebKit 的浏览器，例如 Chrome、Safari 或 Opera 的较新版本。
  • -moz-：适用于 Firefox。
  • -o-：适用于旧版 Opera。
  • -ms-：用于 IE 和 Edge。

为了支持所有主流浏览器，我们必须多次定义某些属性。

.gradient {
    background: rgb(30,87,153);
    background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%);
    background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%);
    background: linear-gradient(to bottom, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=0);
}

预处理器可以解决此问题，它借助了 mixin —— 可以代替硬编码值使用的函数。

@mixin gradient() {
    background: rgb(30,87,153);
    background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%);
    background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%);
    background: linear-gradient(to bottom, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=0);
}

.gradient {
    @include gradient();
}

在需要的时候添加 mixin 可以避免编写冗余代码。

使用后处理器

更好的选择是后处理器。一旦 CSS 由预处理器生成，则后处理器可以运行其他优化步骤。最受欢迎的后处理器之一是 [PostCSS](https://postcss.org/)。

你可以使用 PostCSS 来自动为 CSS 规则添加前缀，就必担心会遗漏主要的浏览器。他们使用 Can I Use 中的值，因此它始终保持最新的。

另一个很好的后处理器是 [autoprefixer](https://www.npmjs.com/package/autoprefixer)。使用 autoprefixer，当您要支持最新四个版本时 — 无需在CSS文件中写入任何前缀就可以完成所有工作！

const autoprefixer = require('autoprefixer')({
    browsers: [
 'last 4 versions',
 'not ie < 9'
    ]
});
使用配置进行一致的设计

除了 mixin，你还可以选择使用变量。与 linter 一起，你可以强制执行自己的设计规则。

// 字体定义
$font-12: 12px;
$font-21: 21px;

// 颜色定义
$color-white: #FAFAFA;
$color-black: #212121;

4. 使用标签代替 CSS

现在让我们进入实际的 CSS 应用。这经常被忽略。通常，你可以简单地通过使用正确的 HTML 标签来减小 CSS 包的大小。假设你的标题包含以下规则：

span.heading {
    display: block;
    font-size: 1.2em;
    margin-top: 1em;
    margin-bottom: 1em; 
}

你使用了一个 span 标签作为标题。你重写了默认的显示、间距和字体样式。这可以通过使用 h1、h2 或 h3 来避免。默认情况下，它们具有你试图用其他标签达到的样式。你可以立即少写四条不必要的样式规则。

5. 使用简写属性

为了进一步减少样式规则数量，通常使用 简写属性。对于上面的示例，我们可以写：

.heading {
    margin: 1em 0;
}

对于其他属性，如边框、边框或背景，也是如此。

图片

6. 减少冗余

这与上一点是密切相关的。有时很难发现冗余，特别是当两个选择器中的重复规则未遵循相同顺序时。但是，如果你的类仅在一个或两个规则中有所不同，最好将这些规则外包出去，作为一个额外的类使用。这是优化前的代码：

<style>
    .warning {
        width: 100%;
        height: 50px;
        background: yellow;
        border-radius: 5px;
    }

    .elevated-warning {
        width: 100%;
        height: 50px;
        font-size: 150%;
        background: yellow;
        box-shadow: 1px 2px 5px #CCC;
        border-radius: 5px;
    }
</style>

<div class="warning">⚠️</div>
<div class="elevated-warning">🚨</div>

试着用类似的方法：

<style>
    .warning {
        width: 100%;
        height: 50px;
        background: yellow;
        border-radius: 5px;
    }

    .warning--elevated {
        font-size: 150%;
        box-shadow: 1px 2px 5px #CCC;
    }
</style>

<div class="warning">⚠️</div>
<div class="warning warning--elevated">🚨</div>

7. 避免使用复杂的选择器

使用复杂的选择器有两个主要问题。首先，增加的特性不仅会使以后重写现有规则变得更加困难，还会增加浏览器匹配选择器所需的时间。

匹配选择器

当浏览器解析选择器并确定它与哪个元素匹配时，它们是从右到左进行的。就性能而言，这比相反的方式更快。让我们以下面的选择器为例。

.deeply .nested .selector span {
    ...
}

浏览器将首先从 span 开始。它将匹配所有 span 标签，然后转到下一个匹配项。它将过滤掉 .selector 类中的 span，以此类推。

不建议使用 CSS 的标签选择器，因为它会匹配所有的标签。虽然只有几分之一毫秒的差异，但积少成多。另一个更重要的原因是，减少选择器复杂性是一种好习惯。

理解选择器

不仅机器很难进行解析，人类也难以理解。以如下为例：

[type="checkbox"]:checked + [class$="-confirmation"]::after {
    ...
}

你认为上述规则什么时候适用？通过创建自定义类并使用 JavaScript 进行切换，可以简化此过程。

.confirmation-icon::after {
    ...
}

现在看起来舒服多了。如果你发现自己仍然需要过于复杂的选择器，而且你相信没有其他选择，请在下面留下你的评论解释你的解决方案。

/**
 * 选中复选框后创建确认图标。
 * 选择所有以类名“-confirmation”结尾的标签
 * 前面有一个选中的复选框。
 * PS.：没有其他方法可以解决此问题，请不要尝试修复它。
 **/
.checkbox:checked + label[class$="-confirmation"]::after {
    ...
}

8. 不要删除轮廓

这是开发人员在编写 CSS 时最常犯的错误之一。虽然你可能认为删除轮廓创建的高亮没有什么错，但事实上，你正在使网站无法访问。通常将此规则添加为 CSS 的重置值。

:focus {
    outline: none;
}

然而，这样的话，那些只能用键盘导航的用户将对网站聚焦的地方和内容一无所知。

图片

如果默认样式对你的品牌不利，请创建自定义轮廓。只要确保在聚焦元素方面有某种指示即可。

9. 以移动设备优先

当你必须处理媒体查询时，请始终使用移动设备优先。以移动设备为先的方法意味着当你开始编写 CSS 时，需要以小屏幕开发为基础，然后再扩展到其他设备。这也称为渐进增强。

这将确保你主要添加额外的规则来迎合大屏幕设备，而不是重写现有的 CSS 规则。这样可以减少最终使用的规则数量。

您如何判断是否使用移动优先？如果你的媒体查询使用 min-width，你就在正确的轨道上。

/* 移动优先的媒体查询，所有 600px 以上的设备都会获得以下样式 */
@media (min-width: 600px) {
    /* 你的CSS规则 */
}

/* 非移动优先媒体查询，所有 600px 以下的设备都会获得以下样式 */
@media (max-width: 600px) {
    /* 你的CSS规则 */
}

10. 压缩

最后，压缩文件包以减少它们的大小。因为压缩过程删除了注释和空白字符，所以文件包只需更少的宽带就能获取。

图片

如果还没有，也可以在服务器端启用压缩。

进一步减小 CSS —— 「和标记」 —— 大小的另一种好方法是混淆类名。

图片

为此，你可以根据项目设置选择几个选项：

  • 「Webpack」：对于 Webpack，可以使用 [css-loader](https://github.com/webpack-contrib/css-loader) 模块。
  • 「Gulp」: 对于 Gulp，可以使用 [gulp-minify-cssnames](https://www.npmjs.com/package/gulp-minify-cssnames) 插件。
  • 「自定义」: 如果你没有用于项目设置的专用软件包，那么我会提供一个教程，向你展示如何创建 自己的实现.

总结

遵循以上 10 个简单步骤将有助于你编写有以下优点的 css 文件：

  • 更轻巧
  • 易于维护
  • 易于扩展

不仅如此，使用一些实用工具，如预定义的调色板或排版规则，将帮助您创建更稳定的设计。你的样式复用性也将更高，你就可以为下一个项目节省时间。

还有哪些未在本文提及，而你遵循的 CSS 最佳实践呢？在评论中告诉我们！

感谢你花时间阅读本文，祝你愉快！

鱼惊秋
关注
专栏目录
Web前端开发最佳实践总结三：CSS最佳实践
qq_27905183的博客
10-30 1199
CSS Reset概念在浏览器中，html的标签是有原始的样式的，这也是标签语义的一种体现，但是这也出现一个问题，那就是在不同的浏览器中，标签的默认样式多多少少都有点差异，其中某些差异会给开发带来了不小麻烦。看如下这段代码：<input type="search" /> <input type="button" value="button" />上面两个简单的input标签，然而在IE10、Chro
frutaEfruto:开发一个小型网页，着重介绍使用方法论（BEM）CSS最佳实践以及构建提供模型CSS（原子设计器）
05-06
在这个过程中，我们将深入探讨这两个核心概念，并了解它们如何帮助改善前端开发的效率和代码可维护性。 首先，让我们详细了解BEM方法论。BEM是一种流行的CSS命名约定，它由Yandex公司提出，旨在解决CSS在大型项目中...
css最佳实践
weixin_34061042的博客
10-08 91
CSS作为前端开发必备基础知识，但随着显示器技术发展和多种设备共存情况下，前端技术也越来越复杂，如何更好的使用css，有哪些css框架可以供选择，他们又有什么优缺点？本文对这一些问题进行了说明，文末有各种css框架对比的链接，可以供前端开发小伙伴参考 本文资源www.slidestalk.com/s/Css_BestP… ...
CSS最佳实践
编码改变世界
04-11 972
CSS最佳实践（or规范）： 1.命名：  1.1、采用通俗易懂的英文单词并按内容/功能命名;    {常用命名英文：page、wrap、layout、header(head)、footer(foot、ft)、content(cont)、menu、nav、main、submain、sidebar(side)、logo、banner、        title(tit)、popo(pop)、i
7个jQuery最佳实践
10-23
【jQuery最佳实践】 ...遵循这些最佳实践，不仅可以提升jQuery代码的效率，还能降低资源消耗，改善用户体验。时刻关注代码质量和性能，是每个开发者的职责，尤其在JavaScript库的使用上，更要注重优化。
分享10个优化代码的CSS和JavaScript工具
11-24
以下介绍的10个工具专门针对CSS和JavaScript的代码优化，帮助开发者发现并修复潜在错误，提升代码质量。 1. **CSSLint**：CSSLint是一款领先的CSS linter，采用JavaScript编写，开源且配置选项丰富。它可以指出代码...
CSS性能优化技巧及最佳实践
本章将深入理解CSS性能优化的重要性，以及分析CSS对网页加载速度的影响。 ## 1.1 为什么CSS性能优化是网页性能优化的重要组成部分？ CSS文件在网页中扮演着定义样式、布局和外观的重要角色。大型的CSS文件可能会...
深入JavaDoc：10个最佳实践助你实现文档自动化构建
[深入JavaDoc：10个最佳实践助你实现文档自动化构建](https://img-blog.csdnimg.cn/8cecc20fd90c47fbba3fe77e6c985553.png) # 1. JavaDoc基础与自动化构建概述 ## 1.1 JavaDoc的基本概念 JavaDoc 是 Java 语言中的...
CSS一些最佳实践
weixin_33835103的博客
01-30 148
1.一个块元素宽度默认继承包含块的宽度，因此有时宽度可以省略 <style> body,div{ margin:0; padding:0; } .box{ width:200px; } .item{ height:35px; line-height:35px; background-color:orange; } </style> <div cl...
css最佳实践（reset.css）
u011927449的博客
05-25 242
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tf
[译] 完美 CSS 文档的 8 个最佳实践
代码湾
02-22 875
在css的世界，文档没有被得到充分的利用。由于文档对终端用户不可见，因此它的价值常常被忽视。另外，如果你第一次为css编写文档，可能很难确定哪些内容 值得记录，以及 如何能够高效完成编写。 然而，为CSS编写文档可以为你的项目提供很多好处：促进更好的代码实践、降低新员工的上手难度。在本文中，我将说明编写CSS文档的优点，并分享我认为的最佳实践。让文档为你工作，而不是阻碍你的工作。 1. 制定基本规
CSS 最佳实践 + 套路（十） -- 混合篇
CZBBhkrx的博客
01-30 265
概述 本文章主要就是将之前几篇文章中没有提到的，但是个人认为比较重要的 CSS 的最佳实践和套路 居中 水平居中： 内联元素：父元素加 text-align:center;块级元素（固定宽度）：margin: 0 auto;元素不是上述两种情况： 1. 将元素变成内联元素　` display: inline-block; ` + ` text-align:cent
html css 最佳实践,30个CSS最佳实践 | Soo Smart!
weixin_33513218的博客
07-02 257
1. Make it Readable书写格式可读2. Keep it Consistent当你开始创建自己的CSS标准时，你就已经开始变得更专业更精通。标准是一致的保证。3. Start with a Framework建议先从使用框架开始，至少框架有一年左右的使用经历。4. Use a ResetReset目的是为了减少浏览器默认行为的差异。可以参考MeyerWeb5. Organzie t...
8个有点优秀的CSS实践，要把事情简单化的感悟分享
最新发布
m0_56169789的博客
04-10 1117
一般来说，构建响应式面板是使用媒体查询根据不同型号的屏幕尺寸，修改元素的字号就能渲染出不同大小的面板，当然前提是使用相对单位em或者rem。比如说::root{:root{复制代码根据给页面根元素设置不同字号，响应式地重新定义了整个页面的em和rem。但这属于硬编码的形式，只能响应设定的屏幕尺寸。我们知道视口单位vm与vh是相对屏幕来说的，如果将视口单位用于设置字号，那比设置宽度还要实用复制代码设置上面属性会发生什么？当屏幕宽度为1440px时，字号就是。
前端面试：大专也敢想大厂，不试试你怎么知道你不行!
QIANDXX的博客
03-02 1792
故事开篇： 看到一则帖子，讲一个学历只是普通的大专毕业的程序员，做前端5年左右的时间了，中间干过3家公司，都是属于中型互联网企业和创业型的公司，规模不算大。很苦恼进不了大厂，一直在中小公司里打滚天天切图。 有一段时间他几乎天天在面试，从普通的一些小公司，到上市公司，到一线大厂（阿里，腾讯，字节）。然而得到最多的反馈其实就是2种，学历不够或者陪跑。 应该会有不少其他想冲击大厂的同学会得到另外两种反馈，技术深度不够，或者简历上缺乏拿得出手的项目。导致最后没有得到面试机会或者面试通过不了。 在这种前提下，你就很容
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值