如何正确组织更少的班级

我是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中，这将是简单的继承。请建议组织此类代码的最佳方式。

来源

2016-07-30 ketazafor

简短的回答你的问题是，而不是针对特定的HTML结构（即.links a i）写的，你洒在你的HTML或使用它们作为一个混合（因为每个类是可重复使用的，一般类写作选择在LESS中考虑了mixin）。

更好的是，使用一个已知和有文档记录的CSS方法，如促进使用通用css类的OOCSS。

龙答：我可以告诉你是不是很有经验的CSS，所以你还不熟悉，可以使用T型结构的CSS代码惯例和抽象。这里有一些指导可以帮助你，不仅仅是LESS，而是CSS。

一般CSS结构：

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

采用单班改为适用您的命名空间（例如.links-anchor而不是.links a）这样的links命名空间被保留，但没有HTML结构执行。（我明白这个HTML结构太基本了，看不到好处，但现在忍受我）
不要在选择器中使用元素名称（这称为限定选择器）。这再次强制执行特定HTML结构（例如，你只能使用在当前的CSS的i元素），并因为浏览器解析您的选择从右到左它会影响性能。

这意味着，如果浏览器发现.links a它会首先找到在页所有锚，然后将它们过滤到那些与一类.links的元素。

取而代之，您可以为每个希望样式化的元素创建单个类，并使用有意义的父级命名空间。例如：.links，.links-anchor和.links-anchor-i（我不知道什么i元素，就是要代表你的代码
这使我对我的下一个点写描述要造型的，而不是针对语义类。随机HTML元素，如i。这包括你的根元素，以及你的造型孩子。

例如，如果这些links意味着是你的主要导航组件，选择你的根元素称为.main-navigation然后.main-navigation-link类名和.main-navigation-label（如果那是refe rring）

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

现在开始到LESS /工装建议

1 ）尝试使用嵌套仅用于样式变体您的选择器的目标元素和伪元素（:before和:after）。这可以通过&运算符来完成，它是原始选择器的缩写。

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

    &:before {...} 
}

2）后处理器添加到您的CSS的构建，如Autoprefixer它允许你写干净，网页符合标准的CSS，并且很快将得到扩大到您所支持的浏览器所需要的前缀版本。

3）尽量避免使用“神奇数字”。相反，使用LESS变量和计算，以便从数字来源自动说明。

@layout-header-height: 40px; 
@layout-padding: 10px; 
.layout-header {position: fixed; height: @layout-header-height; ...} 
.layout-body { padding-top: (@layout-header-height + @layout-padding); ...}

我认为这是够了，但也有更多的负载信息在那里。

查找由CSS传说，如哈里·罗伯茨（CSS Wizardy），妮可沙利文（OOCSS），乔纳森·斯努克（SMACSS）和尼古拉斯·加拉格尔的文章。
看看大的CSS项目，如Bootstrap和Foundation的源代码，看看他们是如何使用预处理器来构造他们的代码
当然，不停地提问在Stackoverflow！

我希望这有助于和好运:)

来源

2016-07-30 12:23:30 Dogoku

谢谢！你帮了我很多！ – ketazafor

说实话，这不是我的个人代码，我使用它从免费模板（也可用于付费版本）。 – ketazafor

你可以通过创建1个类来实现。例如

创建另外1个类，如下所示，您可以将此类添加到另一个类中。所以你不需要重复编写这段代码。它是由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

来源

2016-07-30 12:17:17

这可能不是你所期待的（如果没有，那么不用担心），但得到的答复，如果你正在学习减少，因为你想拥有更有条理，更易于维护的样式表，然后分组，选择按风格，而不是编组的样式逐个选择是一个替代方法（使用标准的CSS）的 - 虽然没有被广泛采用 - 报价为像SASS和LESS这样的预处理器（但显然不需要compliling），可以进行很多控制和易于维护。我发现（个人而言）它使得CSS调试非常容易。但是，它不是每个人都可以使用的，而是因为它将样式表分成了一系列迷你样式表。

它也摆脱了变量的需要。

E.g.举一个简单的例子，如果h1和nav h2和footer h2是相同的颜色蓝色和aside h2和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);}

到：

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

在传统的样式，在样式通过选择分组，你需要从制造至少2点的变化：

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和box-shadow - 这将是4点的变化在选择被分组的风格样式表......但在样式通过选择分组样式表至少8度的变化。

这是上面的样式表，由风格分组的选择：

.POSITION, 
.links, .links a i::after {position: absolute;} 
.links a i {position: relative;} 

.CO-ORDINATES, 
.links {top: 40%; left: 50%;} 
.links a i {z-index: 100;} 
.links a i::after {top: -7px; left: -7px; z-index: -1;} 

.WIDTH_HEIGHT, 
.links {width: 9em; height: 4em;} 
.links a i::after {width: 30px; height: 30px;} 

.MARGIN_PADDING, 
.links {margin: -20px 0 0 -45px;} 
.links a i {margin: 0 13px;} 

.TEXT-COLOR, 
.links a i {color: #68c3a3;} 
.links a i:hover i {color: #fff;} 

.TEXT-PRESENTATION, 
.links a i {font-size: 16px;} 

.BACKGROUND, 
.links a:hover i:hover {background-color: #68c3a3;} 

.BORDER, 
.links a i::after {border: 1px solid #68c3a3; border-radius: 3px;} 

.MISCELLANEOUS, 
.links {opacity: 0;} 

.PSEUDO-ELEMENTS, 
.links a i::after {content: '';} 

.TRANSFORM, 
.links { 
-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::after { 
-webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
     transform: rotate(45deg); 
}

来源

2016-07-30 14:12:34 Rounin

我很抱歉，但我觉得我必须降低这一点。也许我已经开始成为一名老人了，因为这是我第一次看到像这样的CSS结构，而且看起来对我来说很糟糕。你并没有重复使用任何代码，只是将它分成不同的文件，而不是你正在设计的样式和创建不断增长的选择器。你基本上没有使用SASS的'extend'功能。做这样的事情只有在编写某种CSS重置时才有意义，即便如此，也有更好的方法来实现。 – Dogoku

没关系，@Dogoku - 正如我上面写的那样，它不适合每个人。它对一些人来说看起来很可怕，对别人也很美。我于2013年1月开始按照样式对选择器进行分组（它基于DRY CSS方法），我喜欢它并从未回头过。当谈到我工作的各个网站上的CSS时，我花在维护CSS上的时间与写下CSS的时间的比例大约是8：1。格式化我的CSS就像这意味着我不必寻找一个流浪的风格，或梳理通过样式表寻找一个晦涩的选择器......我总是可以找到我需要的一切并立即更新它。 – Rounin

你的方法绝对是结构化的，比起初学者CSS中的完全无政府状态更好。但是，我发现这种方法存在一些基本缺陷。例如，如果页面的一个组件的样式发生更改，则必须更改至少十几个文件。就像我说的，这种方法可能对CSS重置或某种低级框架有好处，但除此之外，我不会使用它。 – Dogoku

我问自己，多次与上海社会科学院启动时。但是，嵌套不是必须的选项，你会为一些开发人员处理纯粹的.css噩梦，因为这些开发人员可能不想使用编译器。

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

来源

2016-07-30 16:07:11

如何正确组织更少的班级

回答

相关问题