Question

我是LESS世界的新手，所以我对我组织课程的方式有疑问。

以下是我当前的less类代码。

.links {
    width: 9em;
    height: 4em;
    position: absolute;
    top: 40%;
    left: 50%;
    margin-top: -20px;
    margin-left: -45px;
    opacity: 0;
    -webkit-transform: translate(0,-50px);
    -moz-transform: translate(0,-50px);
    -ms-transform: translate(0,-50px);
    -o-transform: translate(0,-50px);
    transform: translate(0,-50px);
    a {
        i {
            position: relative;
            color: @colorMainGreen;
            font-size: 16px;
            margin: 0 13px;
            z-index: 100;
            &::after {
                position: absolute;
                content: "";
                left: -7px;
                top: -7px;
                width: 30px;
                height: 30px;
                border: 1px solid @colorMainGreen;
                z-index: -1;
                border-radius: 3px;
                -webkit-transform: rotate(45deg);
                   -moz-transform: rotate(45deg);
                    -ms-transform: rotate(45deg);
                     -o-transform: rotate(45deg);
                        transform: rotate(45deg);
            }
            &:hover i {
                color:  #fff;
            }
        }
        &:hover {
            i {
                &:hover {
                    background-color: @colorMainGreen;
                }
            }
        }
    }
}

为了清楚起见，这里是编译版本

.links {
  width: 9em;
  height: 4em;
  position: absolute;
  top: 40%;
  left: 50%;
  margin-top: -20px;
  margin-left: -45px;
  opacity: 0;
  -webkit-transform: translate(0, -50px);
  -moz-transform: translate(0, -50px);
  -ms-transform: translate(0, -50px);
  -o-transform: translate(0, -50px);
  transform: translate(0, -50px);
}
.links a i {
  position: relative;
  color: #68c3a3;
  font-size: 16px;
  margin: 0 13px;
  z-index: 100;
}
.links a i::after {
  position: absolute;
  content: "";
  left: -7px;
  top: -7px;
  width: 30px;
  height: 30px;
  border: 1px solid #68c3a3;
  z-index: -1;
  border-radius: 3px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.links a i:hover i {
  color: #fff;
}
.links a:hover i:hover {
  background-color: #68c3a3;
}

我需要在我的代码中添加这部分

.links,
.links a i,
.links a i::after {
    -webkit-transition: all 400ms;
    -moz-transition: all 400ms;
    -o-transition: all 400ms;
    transition: all 400ms;
}

如你所见

我需要在链接及其子类中应用此类我不知道所有可用的方法，所以我只能考虑使用mixins并在每个类中添加它，但这是代码重复。也许有另一种方法可以实现这一点，我已经阅读过有关扩展的内容，也许可以在这里使用它？在OOP语言中，这将是简单的继承。请建议组织此类代码的最佳方式。

Answer 1

对你的问题的简短回答不是编写以特定html结构为目标的选择器（即.links a i）来编写你可以在html上使用的可重用的通用类，或者将它们用作mixin（因为每个类都被认为是mixin in LESS）。

更好的是，使用已知的文档化CSS方法，例如促进使用通用css类的OOCSS。

答案很长：我可以告诉你对CSS不太熟悉，因此你还不熟悉可用于构造CSS代码的常用实践和抽象。这里有一些指导可以帮助你，不仅仅是LESS而是CSS。

一般CSS结构：

使用尽可能少的嵌套。嵌套更像是一种诅咒而不是恩惠，因为我相信你很快就能搞清楚。它会创建长选择器，难以阅读，难以重构，并且对性能不利。但是嵌套更糟糕的是它强制执行特定的html结构。

而是使用单个类（例如.links-anchor而不是.links a）来应用命名空间，这样就可以保留links的命名空间，但不强制执行html结构。（我知道这个html结构太基本了，看不到好处，但现在请耐心等待）
不要在选择器中使用元素名称（这称为限定选择器）。再次强制执行特定的html结构（例如，您只能在当前的css中使用i元素）并且会影响性能，因为浏览器会从右到左解析您的选择器。

这意味着，当浏览器看到.links a时，它会首先在页面中找到所有锚点，然后将其过滤到类别为{{1 }}

相反，为每个要设置样式的元素创建单个类，并使用在语义上有意义的父命名空间。例如：.links，.links和.links-anchor（我不知道.links-anchor-i元素在您的代码中的含义是什么。
这让我想到了下一点。编写描述你样式的语义类，而不是像i那样定位随机html元素。这包括您的根元素以及您正在构造的任何子元素。

例如，如果那些i是您的主要导航组件，请为您的根元素选择一个名为links的类名，然后选择.main-navigation和.main-navigation-link（如果是.main-navigation-label也在提及）

只有一些方法可以改善CSS。我建议阅读优秀的http://cssguidelin.es/页面，其中包含更多改进以及示例和资源。通过阅读并了解CSS的一些缺陷后，我建议开始使用现有的CSS方法，例如OOCSS，BEM，SMACSS或ITCSS

现在开始进行LESS /工具建议

1）尝试仅使用嵌套来设置选择器所针对的变体元素和伪元素（i和:before）。这可以通过:after运算符实现，该运算符是原始选择器的简写。

2）在CSS构建中添加一个后处理器，例如Autoprefixer，它允许您编写干净，符合Web标准的CSS ，稍后将扩展到前缀版本您支持的浏览器需要。

3）尽可能避免使用“魔法数字”。而是使用LESS变量和计算，以便在该数字来自的情况下自我解释。

.navigation-link {
    &:hover {...}
    &:active {...}

    &:before {...}
}

我认为现在已经足够了，但有更多的信息。

查看CSS传奇文章，如Harry Roberts（CSS Wizardy），Nicole Sullivan（OOCSS），Jonathan Snook（SMACSS）和Nicolas Gallagher。
查看大型CSS项目（如Bootstrap和Foundation）的源代码，看看他们如何使用预处理器来构建代码
当然，继续在Stackoverflow上提问！

我希望这会有所帮助并祝你好运：）

Answer 2

你可以通过再创建一个类来做到这一点。仅举例来说

再创建一个额外的类，如下所示，您可以将此类添加到另一个类中。所以你不需要反复编写这段代码。它是由LESS提供的mixins。

.trans {
   -webkit-transition: all 400ms;
    -moz-transition: all 400ms;
    -o-transition: all 400ms;
    transition: all 400ms;
}

现在，您可以将此类添加到所有3个类中，如下所示。

.links {
     .trans;
     a{
        i{
            .trans;
            &:after{
                .trans;
            }
        }
     }
}

更准确地说，你可以包含以下mixin课程，所以你不需要写这4行来进行过渡。

MIXIN LIBS

Answer 3

这可能不是您正在寻找的答案（如果没有，那就不用担心了）但如果您因为想要更有条理，更易于维护的样式表而学习更少，那么分组 - 选择器按样式，而不是分组 - 样式 - 选择器是一种替代方法（使用标准CSS） - 尽管没有广泛采用 - 提供了尽可能多的控制和易于维护像SASS和LESS这样的预处理器（但不言而喻，不需要压缩）。

按类型分组选择器并非适合每个人，但是因为它将样式表分解为一系列迷你样式表，我发现（个人而言）它使CSS调试非常容易。< / p>

它也摆脱了对变量的需求。

例如举一个简单的例子，如果h1和nav h2和footer h2的颜色是蓝色，aside h2和{{1}并且article h2都是红色的，您决定要header h2，h1和nav h2为绿色，然后对样式表进行单一更新，其中选择器按样式分组就足够了，来自：

footer h2

为：

.TEXT-COLOR,
h1, nav h2, footer h2 {color: rgb(0,0,191);}
header h2, aside h2, article h2 {color: rgb(255,0,0);}

在传统样式表中，样式按选择器分组，您需要至少进行2次更改：

.TEXT-COLOR,
h1, nav h2, footer h2 {color: rgb(0,191,0);}
header h2, aside h2, article h2 {color: rgb(255,0,0);}

为：

h1 {color: rgb(0,0,191);}
h2 {color: rgb(0,0,191);}
header h2, aside h2, article h2 {color: rgb(255,0,0);}

请记住这个例子是故意的。如果您一次更改h1 {color: rgb(0,191,0);} h2 {color: rgb(0,191,0);} header h2, aside h2, article h2 {color: rgb(255,0,0);}，margin，padding和font-size，那么样式表中的4个更改将按样式分组选择器...但是样式表中至少8个更改，其中样式按选择器分组。

以上是您的样式表，其中选择器按样式分组：

box-shadow

Answer 4

当我开始使用sass时，我多次问过自己。但是，嵌套不是必须的选项，对于一些可能不想使用编译器的开发人员来说，处理纯.css是一个噩梦

您应该为您的li添加一些类，并尽可能简化嵌套。您可以使用BEM并遵循DRY方法

如何正确组织较少的类

4 个答案: