Optimize css to less code

Question

I am a LESS beginner.

I have some css code here and I would need advise what or what else could I optimize to have less css code but more LESS code ;-)

As a LESS starter I assume I have to look for redundant properties and their values and make one resuable LESS definition of it right?

Then I would start with:

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

border-bottom: black solid 1px; // used 1 time but partly 2 times see above

position:relative // used 2 times

padding:5px; // used 2 times but one time all sides the other only top/bottom

height:100%; // used 2 times

Are there still other things you would LESSen? or take another approach?

#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

(this is supposed to be a comment but it's too long):

It's too broad question in fact. As it totally depends on "what for?".

There's no reason to remove duplicates just for the sake of removing duplicates. The readability and actual semantics of the particular styles in many cases are much more important than just "no repeats". In most cases that kind of "optimization" is not separable from the CSS/HTML structure and their optimization context. So when you see padding: 5px; is repeated twice there're too many questions you need to answer before making something (or anything at all) about it. Why it's duplicated after all? Is it really the very same property of the closely coupled HTML elements or it's just a "coincidence" raised from the fact you have your sizes to be multiples of 5px ?. Will they stay the same or at certain point one may be changed to padding: 10px; ? In many cases the first candidate for the refactoring is this base unit and not the properties themselves.

For instance there's no reason to replace padding: 5px; with .padding(5px); , it's not an "optimization" at all and absolutely useless. It only replaces a piece of code with the same piece of code with just an unusual (and less readable) formatting.

It's also quite complicated matter if you need to replace a property-value statement with some "default" mixin; eg border: 1px solid black; -> .border() . This depends on too many factors too, for instance for the example above I would probably use something like:

... { // 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;
    }
}

But exact code yet again may vary (why it's black ? why it's 1px ? etc. etc. There're zillion variants depending on if it's some kind of theme or "just whatever simple border" or something in between). But there can be no simple rule here as well (just "be reasonable", for instance it's quite often situation when one tries to turn every single value into a dedicated variable which is just an opposite side of the nightmare)

---

And another (sort of unrelated) tip. Before doing any optimization you really need to sort the order of the properties in your styles (see for example ). For now it's just too chaotic - in fact for a reader/maintainer of your code this can be much much more important than the lack or presence of duplicates.