少CSS：嵌套时滥用＆运算符？_随笔

少CSS：嵌套时滥用＆运算符？

自从我们在您提到的问题中遇到它以来，我还一直在思考这种用法。虽然我不能确切地回答这是“错误”的用法

（BoltClock似乎提出了一个非错误的很好的论点），但我想为它的价值辩护（从逻辑上讲这
不是错误）立场）。

但是，在逻辑参数之前，我确实找到了另一个简短的单引号（在“嵌套规则”部分），这似乎表明它至少并非并非意料之外：“

表示当前选择器的父级”。而已。正如BoltClock所论证的，在前面还是后面似乎都没有关系。这样做的唯一目的是成为到目前为止的“选择器父对象”的占位符。总是将其与该语言的“嵌套”用法结合使用的事实表明，该语言旨在指定嵌套的完整选择器字符串，直到嵌套所在的嵌套点为止。该字符串的使用方式（前置或附加）将由编码器决定。

现在，您提到（和前面提到的）您“永远不会以这种方式编码”，但是我发现自己看到了看起来非常有价值的用法。考虑以下参数。

插图的HTML设置

为了说明起见，假设在

body

元素上动态设置了三个可能的类（“浅”，“中”，“暗”主题），这些类会更改网站的“外观”。我们有两列，还有一些不同类型的链接，我们想要的风格（

textlink

，

piclink

，

textWithIconlink

）在不同的为每个主题各列。

<body >  <div >     <a ></a>     <a ></a>     <a ></a>  </div>  <div >     <a ></a>     <a ></a>     <a ></a>  </div></body>

现在要问的问题是，仅查看链接，以下两种方法，即…

LESS中的代码更少
最佳组织LESS中的代码
在CSS中输出更少的代码
最好组织输出的CSS

“最佳”可能有些主观。我让您自己从下面权衡这些证据。

选项＃1典型嵌套

更少（约99行代码）

    .light {      .leftCol {        .textlink {          color: fooL1;          &:hover { color: barL1;}        }         .piclink {          background-image: url(/fooL1.jpg);          &:hover { background-image: url(/barL1.jpg);}        }        .textWithIconlink {          color: fooL2;          background-image: url(/fooL2.jpg);          &:hover { color: barL2; background-image: url(/barL2.jpg);}        }         }      .rightCol {        .textlink {          color: fooL3;          &:hover { color: barL3;}        }         .piclink {          background-image: url(/fooL3.jpg);          &:hover { background-image: url(/barL3.jpg);}        }        .textWithIconlink {          color: fooL4;          background-image: url(/fooL4.jpg);          &:hover { color: barL4; background-image: url(/barL4.jpg);}        }         }    }    .medium {      .leftCol {        .textlink {          color: fooM1;          &:hover { color: barM1;}        }         .piclink {          background-image: url(/fooM1.jpg);          &:hover { background-image: url(/barM1.jpg);}        }        .textWithIconlink {          color: fooM2;          background-image: url(/fooM2.jpg);          &:hover { color: barM2; background-image: url(/barM2.jpg);}        }         }      .rightCol {        .textlink {          color: fooM3;          &:hover { color: barM3;}        }         .piclink {          background-image: url(/fooM3.jpg);          &:hover { background-image: url(/barM3.jpg);}        }        .textWithIconlink {          color: fooM4;          background-image: url(/fooM4.jpg);          &:hover { color: barM4; background-image: url(/barM4.jpg);}        }         }    }    .dark {      .leftCol {        .textlink {          color: fooD1;          &:hover { color: barD1;}        }         .piclink {          background-image: url(/fooD1.jpg);          &:hover { background-image: url(/barD1.jpg);}        }        .textWithIconlink {          color: fooD2;          background-image: url(/fooD2.jpg);          &:hover { color: barD2; background-image: url(/barD2.jpg);}        }         }      .rightCol {        .textlink {          color: fooD3;          &:hover { color: barD3;}        }         .piclink {          background-image: url(/fooD3.jpg);          &:hover { background-image: url(/barD3.jpg);}        }        .textWithIconlink {          color: fooD4;          background-image: url(/fooD4.jpg);          &:hover { color: barD4; background-image: url(/barD4.jpg);}        }         }    }

CSS输出 （大约87行输出，按主题排列）

 .light .leftCol .textlink { color:fooL1; }.light .leftCol .textlink:hover { color:barL1; }.light .leftCol .piclink { background-image:url(/fooL1.jpg); }.light .leftCol .piclink:hover { background-image:url(/barL1.jpg); }.light .leftCol .textWithIconlink {  color:fooL2;  background-image:url(/fooL2.jpg);}.light .leftCol .textWithIconlink:hover {  color:barL2;  background-image:url(/barL2.jpg);}.light .rightCol .textlink { color:fooL3; }.light .rightCol .textlink:hover { color:barL3; }.light .rightCol .piclink { background-image:url(/fooL3.jpg); }.light .rightCol .piclink:hover { background-image:url(/barL3.jpg); }.light .rightCol .textWithIconlink {  color:fooL4;  background-image:url(/fooL4.jpg);}.light .rightCol .textWithIconlink:hover {  color:barL4;  background-image:url(/barL4.jpg);}.medium .leftCol .textlink { color:fooM1; }.medium .leftCol .textlink:hover { color:barM1; }.medium .leftCol .piclink { background-image:url(/fooM1.jpg); }.medium .leftCol .piclink:hover { background-image:url(/barM1.jpg); }.medium .leftCol .textWithIconlink {  color:fooM2;  background-image:url(/fooM2.jpg);}.medium .leftCol .textWithIconlink:hover {  color:barM2;  background-image:url(/barM2.jpg);}.medium .rightCol .textlink { color:fooM3; }.medium .rightCol .textlink:hover { color:barM3; }.medium .rightCol .piclink { background-image:url(/fooM3.jpg); }.medium .rightCol .piclink:hover { background-image:url(/barM3.jpg); }.medium .rightCol .textWithIconlink {  color:fooM4;  background-image:url(/fooM4.jpg);}.medium .rightCol .textWithIconlink:hover {  color:barM4;  background-image:url(/barM4.jpg);}.dark .leftCol .textlink { color:fooD1; }.dark .leftCol .textlink:hover { color:barD1; }.dark .leftCol .piclink { background-image:url(/fooD1.jpg); }.dark .leftCol .piclink:hover { background-image:url(/barD1.jpg); }.dark .leftCol .textWithIconlink {  color:fooD2;  background-image:url(/fooD2.jpg);}.dark .leftCol .textWithIconlink:hover {  color:barD2;  background-image:url(/barD2.jpg);}.dark .rightCol .textlink { color:fooD3; }.dark .rightCol .textlink:hover { color:barD3; }.dark .rightCol .piclink { background-image:url(/fooD3.jpg); }.dark .rightCol .piclink:hover { background-image:url(/barD3.jpg); }.dark .rightCol .textWithIconlink {  color:fooD4;  background-image:url(/fooD4.jpg);}.dark .rightCol .textWithIconlink:hover {  color:barD4;  background-image:url(/barD4.jpg);}

选项＃2最终目标分组

我将其命名为“最终目标分组”，因为这确实是我使用

添加父选择器的另一种方式看到的方式。现在，一个编码是根据实际被设置样式的最终目标元素进行的。

更少（约88行代码）

.textlink {  .light .leftCol &  {      color: fooL1;      &:hover { color: barL1;}    }        .light .rightCol &  {      color: fooL3;      &:hover { color: barL3;}    }   .medium .leftCol &  {      color: fooM1;      &:hover { color: barM1;}    }   .medium .rightCol &  {      color: fooM3;      &:hover { color: barM3;}    }   .dark .leftCol &  {      color: fooD1;      &:hover { color: barD1;}    }   .dark .rightCol &  {      color: fooD3;      &:hover { color: barD3;}    } }.piclink {  .light .leftCol &  {      background-image: url(/fooL1.jpg);      &:hover { background-image: url(/barL1.jpg);}    }   .light .rightCol &  {      background-image: url(/fooL3.jpg);      &:hover { background-image: url(/barL3.jpg);}    }   .medium .leftCol &  {      background-image: url(/fooM1.jpg);      &:hover { background-image: url(/barM1.jpg);}    }   .medium .rightCol &  {      background-image: url(/fooM3.jpg);      &:hover { background-image: url(/barM3.jpg);}    }   .dark .leftCol &  {      background-image: url(/fooD1.jpg);      &:hover { background-image: url(/barD1.jpg);}    }   .dark .rightCol &  {      background-image: url(/fooD3.jpg);      &:hover { background-image: url(/barD3.jpg);}    } }.textWithIconlink {  .light .leftCol &  {      color: fooL2;      background-image: url(/fooL1.jpg);      &:hover { color: barL2; background-image: url(/barL1.jpg);}    }   .light .rightCol &  {      color: fooL4;      background-image: url(/fooL3.jpg);      &:hover { color: barL4;  background-image: url(/barL3.jpg);}    }   .medium .leftCol &  {      color: fooM2;      background-image: url(/fooM1.jpg);      &:hover { color: barM2; background-image: url(/barM1.jpg);}    }   .medium .rightCol &  {     color: fooM4;      background-image: url(/fooM3.jpg);      &:hover { color: barM4; background-image: url(/barM3.jpg);}    }   .dark .leftCol &  {     color: fooD2;      background-image: url(/fooD1.jpg);      &:hover { color: barD2; background-image: url(/barD1.jpg);}    }   .dark .rightCol &  {      color: fooD4;      background-image: url(/fooD3.jpg);      &:hover { color: barD4; background-image: url(/barD3.jpg);}    } }

CSS （大约88行输出（由于多了一条注释），由最终目标元素组成；但是请注意，由于类结构的原因，仍然存在一个按主题划分的子组织）

.light .leftCol .textlink { color:fooL1; }.light .leftCol .textlink:hover { color:barL1; }.light .rightCol .textlink { color:fooL3; }.light .rightCol .textlink:hover { color:barL3; }.medium .leftCol .textlink { color:fooM1; }.medium .leftCol .textlink:hover { color:barM1; }.medium .rightCol .textlink { color:fooM3; }.medium .rightCol .textlink:hover { color:barM3; }.dark .leftCol .textlink { color:fooD1; }.dark .leftCol .textlink:hover { color:barD1; }.dark .rightCol .textlink { color:fooD3; }.dark .rightCol .textlink:hover { color:barD3; }.light .leftCol .piclink { background-image:url(/fooL1.jpg); }.light .leftCol .piclink:hover { background-image:url(/barL1.jpg); }.light .rightCol .piclink { background-image:url(/fooL3.jpg); }.light .rightCol .piclink:hover { background-image:url(/barL3.jpg); }.medium .leftCol .piclink { background-image:url(/fooM1.jpg); }.medium .leftCol .piclink:hover { background-image:url(/barM1.jpg); }.medium .rightCol .piclink { background-image:url(/fooM3.jpg); }.medium .rightCol .piclink:hover { background-image:url(/barM3.jpg); }.dark .leftCol .piclink { background-image:url(/fooD1.jpg); }.dark .leftCol .piclink:hover { background-image:url(/barD1.jpg); }.dark .rightCol .piclink { background-image:url(/fooD3.jpg); }.dark .rightCol .piclink:hover { background-image:url(/barD3.jpg); }.light .leftCol .textWithIconlink {  color:fooL2;  background-image:url(/fooL1.jpg);}.light .leftCol .textWithIconlink:hover {  color:barL2;  background-image:url(/barL1.jpg);}.light .rightCol .textWithIconlink {  color:fooL4;  background-image:url(/fooL3.jpg);}.light .rightCol .textWithIconlink:hover {  color:barL4;  background-image:url(/barL3.jpg);}.medium .leftCol .textWithIconlink {  color:fooM2;  background-image:url(/fooM1.jpg);}.medium .leftCol .textWithIconlink:hover {  color:barM2;  background-image:url(/barM1.jpg);}.medium .rightCol .textWithIconlink {  color:fooM4;  background-image:url(/fooM3.jpg);}.medium .rightCol .textWithIconlink:hover {  color:barM4;  background-image:url(/barM3.jpg);}.dark .leftCol .textWithIconlink {  color:fooD2;  background-image:url(/fooD1.jpg);}.dark .leftCol .textWithIconlink:hover {  color:barD2;  background-image:url(/barD1.jpg);}.dark .rightCol .textWithIconlink {  color:fooD4;  background-image:url(/fooD3.jpg);}.dark .rightCol .textWithIconlink:hover {  color:barD4;  background-image:url(/barD3.jpg);}

结论思想

其他一些注意事项：

首先，大多数主题颜色（可能还有其他主题方面）都将设置有变量，即使使用上述选项2，也可以按主题将其分组到LESS代码的顶部，因此具有输出的主题结构CSS本身散布在代码中不一定是不好的。

其次，在任何主题代码之上都定义了一种元素类型的任何“标准”代码。我的示例并未显示这一点，但是说所有

.textlink

元素都已

text-decoration:none;

设置。这将在选项＃2下发生一次，而没有任何其他选择器代码，并且将出现在下面所有主题更改的上方。对于选项1，我需要设置一个新的，未 嵌套的

.textlink

选择器（至少另一行代码），以将其应用于所有主题链接，并且该类的“基础”代码将再次位于与以下位置无关的位置主题链接信息的其余代码为。

第三，作为开发人员，如果我遇到问题

piclinks

（页面上的特定类型的元素），则选择＃2可以更轻松地检查我的代码中存在问题的元素，因为我的所有代码主题恰到好处。

显然，人们如何希望最终的LESS和CSS组织起来将成为人们如何看待这一价值的主要因素。
我在这里的观点只是说明存在一个非常有用的逻辑理由，

以这种方式使用父级选择器添加到

引用中。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/5112063.html

少CSS：嵌套时滥用＆运算符？

发表评论

评论列表（0条）