【译】谨慎使用CSS中的波浪选择器

dcr309duan 发布于2019-08-30 12:59 / 2463人阅读

摘要：它们都错误地使用了波浪选择器，并造成了很多地方的代码臃肿。大家可能以前也都遇到或者使用过波浪选择器，毕竟它作为选择器已经很长时间了，甚至都支持。我的经验里，使用波浪选择器一般都是通过而不是来选择兄弟元素的。

原文：The tilde CSS selector, use carefully!

最近我的一些项目都遇到了一些类似的样式问题。它们都错误地使用了波浪选择器，并造成了很多地方的CSS代码臃肿(CSS Bloat)。大家可能以前也都遇到或者使用过波浪选择器，毕竟它作为CSS选择器已经很长时间了，甚至IE7都支持。波浪选择器用来选择所有匹配到的兄弟元素。

一个例子


Item 1
Item 2
Item 3
Item 4

.something-important {
   color: red;
}
.something-important ~ li {
   font-style: italic;
   color: grey;
}

效果：

这里我们的波浪选择器匹配了.something-important的所有兄弟元素，item2，3，4。

所以问题在哪儿呢？

它太容易制造出脆弱的代码了。

我的经验里，使用波浪选择器一般都是通过type而不是class来选择兄弟元素的。这样会造成你不知道这个选择器写这儿到底是干嘛用的。上面这个例子我们就不知道.something-important ~li选择到的

标签是个啥，不如直接给这些li标签加上.not-important来的简单直接。

通常来说多敲几个字给每个元素都加上class可以给未来的维护减少很多不必要的麻烦。

“在写代码的时候，永远假设最后一个维护你的代码是一个知道你家住在哪儿的沉默的精神病人。写点人读得懂的代码。——John Woods”

用武之地

待编辑

避免CSS代码臃肿

我认为这篇文章并不仅仅就是告诉大家避免使用波浪选择器，更多的是让大家知道遇到CSS的问题时不要从加上更多的CSS的代码开始。这从来都不是保持代码可维护性的方法。

超融合服务器云服务器 css选择器基础选择器css css选择 js css 加载器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115221.html

CSS开发

摘要：译十六进制颜色揭秘原文地址原文作者译文出自掘金翻译计划本文永久链接教程入门篇关于是一款进行栅格布局的辅助工具，它让开发者摆脱了冗杂的数学计算，同时降低了样式与结构的耦合程度。【译】CSS 十六进制颜色揭秘原文地址：CSS Hex Colors Demystified 原文作者：Dave Gash 译文出自：掘金翻译计划本文永久链接：https://github.com/xitu/...

warkiz 2019-08-30 13:54 评论0 收藏0
【前端工程师手册】30分钟搞清楚选择器和权重

有哪些选择器基本选择器通配选择器（＊） ID选择器（#ID）类选择器（.className）元素选择器(tagName) 后代选择器（a b）子元素选择器(a>b) 相邻后面兄弟元素选择器(a + b) 通用后面兄弟选择器（a 〜 b）群组选择器（selector1,selector2,...）这里面平时不太常用的选择器有相邻后面兄弟选择器和通用后面兄弟选择器首先，很多资料上把它...

boredream 2019-08-30 14:10 评论0 收藏0
【前端工程师手册】30分钟搞清楚选择器和权重

有哪些选择器基本选择器通配选择器（＊） ID选择器（#ID）类选择器（.className）元素选择器(tagName) 后代选择器（a b）子元素选择器(a>b) 相邻后面兄弟元素选择器(a + b) 通用后面兄弟选择器（a 〜 b）群组选择器（selector1,selector2,...）这里面平时不太常用的选择器有相邻后面兄弟选择器和通用后面兄弟选择器首先，很多资料上把它...

SexySix 2019-08-01 18:42 评论0 收藏0
css选择器

摘要：前言选择器是前端的基本功只要你是一个前端这个一定要掌握今天之所以要重温一下选择器主要是和大家再复习一下选择器中的一些常用符号的使用例如等的使用之所以要复习呢是因为我一个写后端的哥们前端写的也很好但是他今天突然问我中加号和大于号是啥意思我说这前言 css选择器,是前端的基本功,只要你是一个前端,这个一定要掌握!今天之所以要重温一下css选择器,主要是和大家再复习一下css选择器中的一些常用符号...

番茄西红柿 2019-04-23 13:36 评论0 收藏0
2017-07-28 前端日报

2017-07-28 前端日报精选 React的新引擎—React Fiber是什么？Chromeless 让 Chrome 自动化变得简单【译】JavaScript属性名称中的隐藏信息前端测试框架 JestES6中的JavaScript工厂函数Why Composition is Harder with ClassesGET READY: A NEW V8 IS COMING, NODE.JS...

golden_hamster 2019-08-20 18:22 评论0 收藏0