adobe全家福_全家福：分组CSS选择器

adobe全家福

Grouped selectors are one of the most efficient ways of reducing your CSS to tight, clean, easily maintained code, while bringing the benefit of imposing a stronger, more consistent design.

分组选择器是将CSS简化为紧凑，干净，易于维护的代码的最有效方法之一，同时带来了实施更强大，更一致的设计的好处。

The principle is simple: where properties and values are shared in a stylesheet, join the declarations and selectors into a single group. As one example, it’s common to see repeated uses of the same font-family in a stylesheet:

原理很简单： 在样式表中共享属性和值的情况下，将声明和选择器连接到一个组中 。 作为一个示例，常见的是在样式表中重复使用相同的font-family ：

h1 {
	font-family: Avenir, Arial, Helvetica, sans-serif;
	line-height: 1.4;
}
p { 
	font-family: Avenir, Arial, Helvetica, sans-serif;
	line-height: 1.6;
}

It’s far more efficient to join the selectors together as a group with shared properties and values, leaving the unique declarations separate:

将选择器作为一组具有共享属性和值的组连接在一起，效率要高得多，而将唯一声明分开：

h1, p { 
	font-family: Avenir, Arial, Helvetica, sans-serif;
}
h1 { 
	line-height: 1.4;
}
p {
	line-height: 1.6;
}

You can group almost anything in a stylesheet: simple elements, classes, ids, pseudo-element selectors and more. Often the selectors in a grouped style will be determined before site construction begins, based a mockup, styletiles, meetings with clients or a style guide. You’ll often find lengthy grouped selections in CSS resets.

您可以将样式表中的几乎所有内容分组：简单元素， 类 ， id ， 伪元素选择器等。 通常，将根据模型， styletiles ，与客户会面或样式指南在站点开始构建之前确定分组样式的选择器。 您经常会在CSS重置中找到冗长的分组选择。

不要忘记继承 (Don’t Forget Inheritance)

It’s the CSS equivalent of “not seeing the wood for the trees”: seeing commonalities as you write your CSS, grouping them together, and not realizing that you have so many elements chained together with shared rules that the styles should be inherited by every element.

这与CSS的“看不见树木的树木”等效：在编写CSS时看到共同点，将它们分组在一起，并且没有意识到您有太多元素与共享规则链接在一起，因此样式应该由每个元素继承。

If you start seeing grouped selectors like this in your CSS:

如果您开始在CSS中看到像这样的分组选择器：

h1, h2, h3, h4, h5, h6, p, td, th {
	font-weight: 100;
}

It’s a fair bet that almost everything in your site has the lightest font-weight possible. In that case, simply eliminate the grouped selector and substitute this:

可以肯定的是，您网站中的几乎所有内容都可能具有最轻的字体重量。 在这种情况下，只需消除分组的选择器并替换为：

body {
	font-weight: 100;
}

… addressing any exceptions in a grouped selector, if need be.

…解决分组选择器中的所有异常 (如果需要)。

复杂的分组选择器需要预处理器 (Complex Grouped Selectors Call For Pre-Preprocessors)

Grouping can get particularly long and complex with particular forms of selectors, most especially pseudo states such as :hover & :visited. For example, attempting to share a :hover effect between several different classes and states in a grouped selector:

使用特定形式的选择器，尤其是伪状态，如:hover ＆ :visited ，分组会变得特别漫长和复杂。 例如，尝试在分组选择器中的几个不同类和状态之间共享:hover效果：

ul li a.social:hover, nav a:hover,  h1 a:hover { 
	opacity: 1;
}

Not only is this difficult to read, but it’s frustrating: there’s no way to make a selector that simply says “control the :hover states of all these elements”.

这不仅难以阅读，而且令人沮丧：没有办法使选择器简单地说“控制所有这些元素的:hover状态”。

If your CSS is getting this wild and thorny, it may be time to consider a CSS pre-processor such as Sass, a framework with shortcuts that CSS does not currently support, but which exports generated styles that modern browsers can understand. For example, the same declaration in Sass:

如果您CSS变得如此棘手和棘手，那么可能是时候考虑使用CSS预处理器，例如Sass ，该框架具有CSS当前不支持的快捷方式，但是会导出现代浏览器可以理解的生成样式。 例如，Sass中的相同声明：

ul li a.social, nav a, h1 a {
	/* shared CSS */
	&:hover { 
	/* shared CSS for a hover state */ 
	}
}

自动为人民 (Automatic For The People)

Most CSS minification tools, such as Smaller and Minimus, will automatically cojoin selectors into groups. One downside is that, like pre-processors, the resulting CSS can be deeply obfuscated, requiring that you return to the source CSS to make any changes.

大多数CSS缩小工具，例如Smaller和Minimus ，都会自动将选择器组合在一起。 缺点是，像预处理器一样，生成CSS可能会被深深混淆，要求您返回到源CSS进行任何更改。

翻译自: https://thenewcode.com/676/All-In-The-Family-Grouping-CSS-Selectors

adobe全家福