🚀 7 个超棒的 CSS 技巧，助你轻松检查 HTML 代码 🔥
大家好！
上周我们学习了如何在 React JS 中对 CSS/SCSS 进行作用域控制。
今天，我们来学习7个CSS代码检查技巧。
CSS（层叠样式表）是一种允许你定义文档样式的语言。在 JavaScript 中，你可能使用ESLint来检查代码中的各种错误。但是在 CSS 中，我们如何调试样式并查看可能的错误呢？
使用这些技巧无需任何前提条件，也无需任何软件包。
让我们检查一下我们的 CSS 代码。
1. 检查[alt]img 的属性
使用 CSS 调试没有 alt 属性的图片。[alt]所有图片都必须存在此属性，但对于纯粹的装饰性图片，此属性可以留空。
2. 输入与标签之间的关系
务必明确输入框与其标签之间的关系。可以使用 id 和 for 属性来实现这一点。
3. 检查标题顺序
HTML 中的<h1>-<h6>元素代表六个级别的章节标题。<h1>是最高级别的章节标题，<h6>是最低级别的章节标题。
应避免跳过标题级别。
h2上方h1🔴h3上方h4🟢h6上方h5🔴h6上方h2🔴
所以请检查一下我们的标题顺序是否错误。
注意：让我们使用新的:is伪类！
4. 不允许div内联元素
<div>此选择器在行内元素（例如 a<span>或 ）中查找内容<label>。
你可以看到如何使用:is选择器来检查 HTML 代码并保持语义化。
5. HTML 文档中的语言
html标签接受 lang 属性，根据 MDN 的说法，该属性对于可访问性和屏幕阅读器等可访问技术非常重要。
为什么？屏幕阅读器会根据所声明的语言来调整单词的发音。没有声明语言的文档会被读错。
6. 防止锚点出现恶意问题
当您使用该属性链接到其他网站上的页面时target="_blank"，可能会使您的网站面临性能和安全问题：
- 另一个页面可能与您的页面运行在同一个进程中。如果另一个页面运行了大量的 JavaScript 代码，则您的页面性能可能会受到影响。
- 另一个页面可以通过 window.opener 属性访问您的窗口对象。这可能导致另一个页面将您的页面重定向到恶意 URL。
在 target="_blank" 链接中添加rel="noopener"or可以避免这些问题。rel="noreferrer"
7.picture元素必须有.webp来源
据谷歌称，WebP格式可以将图像大小减少19%到64%。这意味着网站加载速度更快，消耗的带宽更少。
所以让我们用 .webp 图片来优化性能。
希望这些小技巧能帮助你更好地编写 HTML 代码！
您可以在以下gist中找到所有 CSS 代码。
这些技巧大部分都可以在推特上的 #lintHTMLwithCSS 话题中找到。
干杯🍻🍻🍻
文章来源：https://dev.to/viclafouch/7-amazing-css-tips-and-tricks-for-linting-your-html-o5n
