优化 css 以减少代码

Question

我是 LESS 初学者。

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

作为 LESS 初学者，我假设我必须寻找冗余属性及其值，并为它制定一个可重用的 LESS 定义，对吗？

那么我会开始：

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

border-bottom: black solid 1px; // 使用了 1 次但部分使用了 2 次见上文

position:relative // used 2 times

padding:5px; // 使用了 2 次，但一次是所有面，另一面仅 top/bottom

身高：100%； // 使用了 2 次

还有其他你想 LESsen 的东西吗？或者采取另一种方法？

#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

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

其实这个问题太笼统了。因为它完全取决于 "what for?"。

没有理由仅仅为了删除重复项而删除重复项。在许多情况下，特定样式的可读性和实际语义比 "no repeats" 重要得多。在大多数情况下，这种 "optimization" 与 CSS/HTML 结构和 它们的 优化上下文不可分离。因此，当您看到 padding: 5px; 重复两次时，您需要回答太多问题 ，然后才能 做出有关它的事情（或任何事情）。为什么它毕竟是重复的？它真的与紧密耦合的 HTML 元素完全相同属性还是只是 "coincidence" 从你的尺寸是 5px 的倍数这一事实中提出来的？它们会保持不变还是在某个时候可能会更改为 padding: 10px;？在许多情况下，重构的第一个候选者是这个基本单元，而不是属性本身。

例如，没有理由用 .padding(5px); 替换 padding: 5px;，它根本不是 "optimization"，而且完全没有用。它仅用 相同的 代码段替换了一段代码，只是格式不寻常（且可读性较差）。

如果你需要用一些"default" mixin 替换一个属性-value 语句，这也是一件相当复杂的事情；例如border: 1px solid black; -> .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？等等等等。根据它是某种主题还是 "just whatever simple border" 或介于两者之间）。但是这里也没有简单的规则（只是 "be reasonable"，例如，当人们试图将每个单个值转换为一个专用变量时，这是很常见的情况，它只是一个噩梦的对面）

还有另一个（有点不相关的）提示。在进行任何优化之前，您确实需要对样式中的属性顺序进行排序（参见 for example）。现在它太混乱了 - 实际上对于 reader/maintainer 的代码来说，这可能比缺少或存在重复项重要得多。

优化 css 以减少代码

Optimize css to less code

css

less