Question

我是一个初学者。

我这里有一些css代码，我需要建议我可以优化什么或其他什么来减少css代码但是代码更少; - ）

作为一个LESS首发，我假设我必须寻找冗余属性及其值，并对其进行一次可恢复的LESS定义吗？

然后我会开始：

border: solid 1px black; // used 2 times

border-bottom: black solid 1px; //使用1次，但部分使用2次

position:relative // used 2 times

padding:5px; //使用了2次，但是一次是所有方面，另一方只是顶部/底部

高度：100％; //使用了2次

还有其他事情你会失败吗？或采取另一种方法？

#availableOptionSidebarContainer {
    text-align: center;
    display: table;
    z-index: 100000;
    border: solid 1px black;
}

#availableOptionsContainer {
    position:absolute;
    height: 100%;
    width: 220px;
    border: black solid 1px;
    display: none; /* initially the flyout is hidden */
    background-color: white;
}

#availableOptionsPager {
    margin: 0 auto;
    border-bottom: black solid 1px;
    width: 100%;
    height: 10%;
}

#availableOptionsContainerWrapper{
     position:relative;
     height:100%;    
}

#availableOptionsGrid {
    position: relative;
    height: 90%;
}

.availableOptionsArrow {
    cursor: pointer;
    font-size: 80%;
    display: table-cell;
    vertical-align: middle;
}

.availableOptionsPagerArrow {
    padding: 5px 0 5px 0;
}

#availableOptionSidebarContainerOpener {
    padding: 5px;
}

Answer 1

（这应该是一个评论，但它太长了）：

实际上这个问题太广泛了。因为它完全取决于“为什么？”。

没有理由删除重复项只是为了删除重复项。在许多情况下，特定样式的可读性和实际语义比“无重复”更重要。在大多数情况下，这种“优化”不能与CSS / HTML结构和他们的优化上下文分开。因此，当您看到padding: 5px;重复两次时，您需要回答之前需要回答的问题太多在做出某些事情（或任何事情）之前。为什么它毕竟是重复的？它是否真的是紧密耦合的HTML元素的相同属性，或者只是因为你的大小是5px的倍数而引起的“巧合”。它们是否保持不变或在某个时刻可能会更改为padding: 10px;？在许多情况下，重构的第一个候选者是这个基本单位而不是属性本身。

例如，没有理由将padding: 5px;替换为.padding(5px);，它根本不是“优化”而且绝对无用。它只使用相同的代码替换一段代码，只是一个不寻常的（并且不太可读）格式化。

如果你需要用一些“默认”mixin替换一个property-value语句，那也很复杂;例如border: 1px solid black; - ＆gt; .border()。这也取决于太多因素，例如上面的例子我可能会使用类似的东西：

... { // assuming some namespace / group of selectors where "border" value is the same

    @border: 1px solid black;

    #availableOptionSidebarContainer {
        border: @border;
    }

    #availableOptionsContainer {
        border: @border;
    }

    #availableOptionsPager {
        border-bottom: @border;
    }
}

但确切的代码可能会有所不同（为什么它是black？为什么它是1px？等等。根据它是某种主题还是“只是简单的边界”，有很多变种“或介于两者之间的东西。但是这里也没有简单的规则（只是“合理”，例如当人们试图将每个单个值转换为专用变量时，这种情况经常发生，而这个变量只是噩梦）

还有另一种（不相关的）小费。在进行任何优化之前，您确实需要对样式中属性的顺序进行排序（请参阅for example）。现在它太乱了 - 事实上对于你的代码的读者/维护者来说，这比重复的缺乏或存在要重要得多。

优化css以减少代码

1 个答案: