Оптимизируйте css до меньшего кода

Question

Я начинаю начинать.

У меня есть CSS код здесь, и мне нужно было бы посоветовать что или что еще я мог оптимизировать, чтобы иметь меньше кода CSS, но больше МЕНЬШЕ код ;-)

Как МЕНЬШЕ стартер я предполагаю, что я должен искать для резервируемых свойств и их значений и сделать одно разрешимое ПОЛНОЕ определение этого права?

Тогда я хотел бы начать с:

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

border-bottom: black solid 1px; // используется 1 раз, но частично 2 раза см.выше

position:relative // used 2 times 

padding:5px; // используется в 2 раза, но один раз со всех сторон другая только верхняя/нижняя

высота: 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

(это должно быть комментарий, но это слишком долго):

Это слишком обширный вопрос на самом деле. Поскольку это полностью зависит от «зачем?».

Нет причин для удаления дубликатов только для устранения дубликатов. Читаемость и фактическая семантика конкретных стилей во многих случаях гораздо важнее, чем просто «повторений». В большинстве случаев такая «оптимизация» не отделяется от структуры CSS/HTML и их контекста оптимизации. Поэтому, когда вы видите, что padding: 5px; повторяется дважды, есть слишком много вопросов, которые вам нужно ответить до что-то (или что-нибудь еще) об этом. Почему он дублируется в конце концов? Это действительно то же самое свойство тесно связанных элементов HTML, или это просто «совпадение», связанное с тем, что у вас есть ваши размеры, чтобы быть кратными 5px?. Останутся ли они такими же или в какой-то момент можно изменить на padding: 10px;? Во многих случаях первым кандидатом на рефакторинг является эта базовая единица, а не сами свойства.

Например, нет причин для замены padding: 5px; на .padding(5px);, это не «оптимизация» и абсолютно бесполезная. Он заменяет только фрагмент кода тем же кодом с просто необычным (и менее читаемым) форматированием.

Это также довольно сложный вопрос, если вам нужно заменить оператор value-value некоторым «стандартным» mixin; например 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 и т.д. и т.п. Там»? в зависимости от того, какая тема или «просто какая-то простая граница» или что-то среднее между ними).Но здесь не может быть и простого правила (просто «быть разумным», например, часто возникает ситуация, когда вы пытаетесь превратить в одно значение в отдельную переменную, которая является только противоположной стороной кошмара)

---

И еще один (вид неродственного) наконечника. Прежде чем выполнить любую оптимизацию, вам действительно нужно отсортировать порядок свойств в ваших стилях (см. for example). На данный момент это слишком хаотично - на самом деле для читателя/хранителя вашего кода это может быть гораздо более важным, чем отсутствие или наличие дубликатов.