Как упростить код CSS

StackOverflow https://stackoverflow.com/questions/3610649

  •  26-09-2019
  •  | 
  •  

Вопрос

Я работаю с существующим кусочком CSS-кода, который выглядит так (выдержка из гораздо большего тела кода):

.apl_widget_fourLevel {
margin:0 auto 1em;
overflow:hidden;
/* zoom:1 */ /* IE Sheet */  
}

/* a panel container */
.apl_widget_fourLevel .apl_widget_level {
    float:left;
    position:relative;
    overflow:hidden;
    text-align:center;
    width:102px;
    height:150px;
    margin:0 1px 0 0;   
}

/* extra height for widgets with the supplementary data beneath the panels */
/* reset width for selected mini panels */
.apl_widget_fourLevel.apl_widget_client1 .apl_widget_level {
    height:auto;
}

/* extra height for widgets with the supplementary data beneath the panels */
/* reset width for selected mini panels */
.apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level {
    height:auto;
    width:90px;
}

/* reset width for selected mini panels */
.apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level.apl_widget_levelSelected {
    width:102px;
}

    /* the gray label in the panel 
       enforce for mini display */
    .apl_widget_fourLevel .apl_widget_level .apl_widget_label,
    .apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level.apl_widget_levelSelected .apl_widget_label {
        position:absolute;
        top:20px;
        left:0;
        width:100%;
        margin:0;
        color:#555;
        font-weight:normal;
        text-transform:uppercase;
        font-size:100%;
        line-height:1.0em;
        z-index:1;
    }

    /* offset for mini labels */
    .apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level .apl_widget_label {
        margin-top:20px;
        font-size:85%;
    }

    /* label cascade reset for IE6, sigh */
    .apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level.apl_widget_levelSelected .apl_widget_label {
        margin-top:0;
        font-size:100%;
    }

    /* the value displayed in the panel */
    .apl_widget_fourLevel .apl_widget_level .apl_widget_value,
    .apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level.apl_widget_levelSelected .apl_widget_value {
        position:absolute;
        top:45px;
        left:0;
        width:100%;
        margin:0;
        color:#fff;
        font-weight:bold;
        font-size:28px;
        line-height:1.0em;
        z-index:1;
    }

    /* offset for mini value */
    .apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level .apl_widget_value {
        margin-top:15px;
        font-size:24px;
    }

    .apl_widget_fourLevel.apl_widget_client1 .apl_widget_level .apl_widget_value {
        margin-top:3px;
        font-size:20px;
        font-weight:normal;
        opacity:0;
        -moz-opacity:0;
        -webkit-opacity:0;
        filter: alpha(opacity=0);
    }

    /* value cascade reset for IE6, sigh  */
    .apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level.apl_widget_levelSelected .apl_widget_value {
        margin-top:0;
        font-size:28px;
    }

    /* range values smaller */
    .apl_widget_fourLevel.apl_widget_fourLevelRange .apl_widget_level .apl_widget_value {
        margin-top:7px;
        font-size:15px;
    }

    .apl_widget_fourLevel .apl_widget_value a {
        color:#fff;
    }

    /* supplemental value beneath the panel */
    .apl_widget_fourLevel .apl_widget_level .apl_widget_valueScore {
        position:absolute;
        bottom:0px;
        left:0;
        width:100%;
        color:#0072ad;
        font-weight:bold;
        font-size:28px;
        z-index:1;
    }

    .apl_widget_fourLevel .apl_widget_level .apl_widget_valueScore a {
        color:#0072ad;
    }

    /* low values will be lighter color */
    .apl_widget_fourLevel .apl_widget_level.apl_widget_levelLow .apl_widget_valueScore,
    .apl_widget_fourLevel .apl_widget_level.apl_widget_levelLow .apl_widget_valueScore a {
        color:#30a2dd;
    }

    /* the image container element */
    .apl_widget_fourLevel .apl_widget_level .apl_widget_panel {
        overflow:hidden;
        width:100%;
        height:135px;
        position:relative;
    }

        /* the panel image itself */
        .apl_widget_fourLevel .apl_widget_level .apl_widget_panel img {
            position:absolute;
            top:0;
            left:-5px;
            margin-top:-150px;
        }

        /* Individual Level image offsets */
        .apl_widget_fourLevel .apl_widget_level.apl_widget_level1 .apl_widget_panel img {
            left:-5px;
        }

        .apl_widget_fourLevel .apl_widget_level.apl_widget_level2 .apl_widget_panel img {
            left:-105px;
        }

        .apl_widget_fourLevel .apl_widget_level.apl_widget_level3 .apl_widget_panel img {
            left:-205px;
        }

        .apl_widget_fourLevel .apl_widget_level.apl_widget_level4 .apl_widget_panel img {
            left:-305px;
        }

        /* mini panel offsets */
        .apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level .apl_widget_panel img {
            margin-top:-300px;
            margin-left:-6px;
        }

        /* reset image offset via margin for highlighted/selected style */
        .apl_widget_fourLevel .apl_widget_level.apl_widget_levelSelected .apl_widget_panel img {
            margin:0;
        }

Мои основные проблемы с этим являются сложность: у каждого правила на нем есть 3-5 селекторов, что делает его действительно трудно выяснить, какие правило применяется. Есть 25 правил здесь для стилизации четырех кнопок с текстом. Это не может быть так сложно!

В некоторых случаях: этот CSS стили виджет, который показывает четыре растровых изображения, один из которых выбран из одного растрового изображения с использованием спрайтов CSS. Необработанные изображения поступают из одного ряда большого растрового изображения, а изображение в выбранном состоянии поступает из другого ряда. Выбранное изображение помещено в коробку, которая шире и выше, чем коробки невыбранных изображений.

Так есть ли программа, которая упростит это к чему-то когнитивному управлению? Есть ли инструмент, который может определить, какие значения не нужны, потому что они заменяются более конкретными селекторами? Есть ли лучшие практики для решения CSS, так что вы не получаете излишне избирательные пути?

Обновление: 2010-08-31 12:25

Так что я посмотрел в меньше как способ концептуализации кода CSS. И потому что мой код не меньше, я посмотрел вверх css2less. Отказ Вот выдержка того, что CSS®LED производит в вопросе кода:

.apl_widget_fourLevel {
    margin:0 auto 1em;
    overflow:hidden;

    .apl_widget_level.apl_widget_level1 {
        .apl_widget_panel {
            img {
                left:-5px;
            }
        }
    }
    .apl_widget_level.apl_widget_level2 {
        .apl_widget_panel {
            img {
                left:-105px;
            }
        }
    }
    .apl_widget_level.apl_widget_level3 {
        .apl_widget_panel {
            img {
                left:-205px;
            }
        }
    }
    .apl_widget_level.apl_widget_level4 {
        .apl_widget_panel {
            img {
                left:-305px;
            }
        }
    }
    ....
}

Итак, вот вещь: apl_widget_levelx на самом деле уникален. Я думаю, что хороший инструмент может генерировать это:

img#apl_widget_level1 { left:-5px; }
img#apl_widget_level2 { left:-105px; }
img#apl_widget_level3 { left:-205px; }
img#apl_widget_level4 { left:-305px; }

.apl_widget_fourLevel {
    margin:0 auto 1em;
    overflow:hidden;
    ....
}

Подобные комментарии для выбранных / невыбранных элементов.

Мне нравится, где идут ответы, но я ищу инструменты, чтобы облегчить мою жизнь. Полный CSS-код в этом файле составляет 2500 строк, а весь люкс составляет 11000 строк.

Обновление: 2010-09-01 09:50

Это то, что я перевернул его вручную:

ul.apl_widget_content {
    width: 492px;
    height: 140px;
    position: relative;
}
ul.apl_widget_content li {
    background: url(/home/hbrown/tmp/widget_fourlevel_1.png) no-repeat;
    list-style: none;
    display: inline;
    position: absolute;
    text-align:center;
    text-transform:uppercase;
}

#apl_widget_level1 {
    left:5px; top: 0px;
    background-position: -13px -300px;
    width: 86px; height: 133px;
}
#apl_widget_level2 {
    left:105px; top: 0px;
    background-position: -113px -300px;
    width: 86px; height: 133px;
}
#apl_widget_level3 {
    left:205px; top: 0px;
    background-position: -213px -300px;
    width: 86px; height: 133px;
}
#apl_widget_level4 {
    left:305px; top: 0px;
    background-position: -313px -300px;
    width: 86px; height: 133px;
}
#apl_widget_level1s {
    left:5px; top: 0px;
    background-position: -5px 0px;
    width:102px; height: 133px;
}
#apl_widget_level2s {
    left:105px; top: 0px;
    background-position: -105px 0px;
    width:102px; height: 133px;
}
#apl_widget_level3s {
    left:205px; top: 0px;
    background-position: -205px 0px;
    width:102px; height: 133px;
}
#apl_widget_level4s {
    left:305px; top: 0px;
    background-position: -305px 0px;
    width:102px; height: 133px;
}
div.apl_widget_label {
    padding-top: 35px;
    font-size: 85%;
    font-weight:normal;
    top: 20px;
    line-height:1em;
}
.selected .apl_widget_label {
    padding-top: 15px;
}
div.apl_widget_value {
    font-size:24px;
    margin-top:10px;
}
.selected div.apl_widget_value {
    margin-top:15px;
}
.apl_widget_value a {
    text-decoration:none;
    color:#FFF;
}

Ранее 175 строк. Сейчас 75 строк. Большая часть кода (40 строк) делает графирование CSS.

Обновление 2010-09-01 11:30

HTML теперь выглядит:

<ul class="apl_widget_content">
    <li id="apl_widget_level1">
        <div class="apl_widget_label">Level </div>
        <div class="apl_widget_value"><a href="#">1</a></div>
    </li>
    <li id="apl_widget_level2">
        <div class="apl_widget_label">Level</div>
        <div class="apl_widget_value"><a href="#">2</a></div>
    </li>
    <li id="apl_widget_level3s" class="selected">
        <div class="apl_widget_label">Level</div>
        <div class="apl_widget_value"><a href="#">3</a></div>
    </li>
    <li id="apl_widget_level4">
        <div class="apl_widget_label">Level</div>
        <div class="apl_widget_value"><a href="#">4</a></div>
    </li>
</ul>

HTML ранее выглядел как:

<div class="apl_widget_strand_fourLevel apl_widget_fourLevelMini">
    <div class="apl_widget_content">
        <div class="apl_widget_level apl_widget_level1 ">
            <div class="apl_widget_label">Level</div>
            <div class="apl_widget_value"><a href="#">1</a></div>
            <div class="apl_widget_panel">
                <img alt="" src="widget_fourlevel_1.png">
            </div>
        </div>
        <div class="apl_widget_level apl_widget_level2 ">
            <div class="apl_widget_label">Level</div>
            <div class="apl_widget_value"><a href="#">2</a></div>
            <div class="apl_widget_panel">
                <img alt="" src="widget_fourlevel_1.png">
            </div>
        </div>
        <div class="apl_widget_level apl_widget_level3 apl_widget_levelSelected">
            <div class="apl_widget_label">Level</div>
            <div class="apl_widget_value"><a href="#">3</a></div>
            <div class="apl_widget_panel">
                <img alt="" src="widget_fourlevel_1.png">
            </div>
        </div>
        <div class="apl_widget_level apl_widget_level4 ">
            <div class="apl_widget_label">Level</div>
            <div class="apl_widget_value"><a href="#">4</a></div>
            <div class="apl_widget_panel">
                <img alt="" src="widget_fourlevel_1.png">
            </div>
        </div>
    </div>                    
</div>
Это было полезно?

Решение

На основании размещенного HTML я бы предложил следующие изменения:

Внутренние классы apl_widget_label а также apl_widget_value не нужны и могут просто заменять уникальные элементы (это уникально в пределах li). Это может сделать селекторы немного дольше, но намного лучше структурированы и более читаемыми. Так же div Вокруг ссылки не нужно, поскольку ссылка может быть введена напрямую.

<ul class="apl_widget_content">
    <li id="apl_widget_level1">
        <div>Level </div><a href="#">1</a>
    </li>
   ...

с участием

.apl_widget_content li div {
    padding-top: 35px;
    font-size: 85%;
    font-weight:normal;
    top: 20px;
    line-height:1em;
}
.apl_widget_content li.selected div {
    padding-top: 15px;
}
.apl_widget_content li a {
    font-size:24px;
    margin-top:10px;
    text-decoration:none;
    color:#FFF;
    display: block;
}
.apl_widget_content li.selected a {
    margin-top:15px;
}

Вы также можете переместить top, width а также height свойства в правилах уровня к ul.apl_widget_content li(.selected) правила:

ul.apl_widget_content li {
   ...
   top: 0px;
   width: 86px; 
   height: 133px;
}

ul.apl_widget_content li.selected {
    width:102px; 
}

#apl_widget_level1 {
    background-position: -13px -300px;
}

Было бы здорово, если бы вы могли избавиться от идентификаторов «выбранного уровня» (те, с которыми заканчивается s), но я не могу придумать разумного способа, который все еще поддерживает IE6.

Я просто вижу, что вы установили li к display: inline Хотя поддержание блочных элементов Insde их. Вам нужно будет осторожно, потому что, несмотря на то, что, несмотря на технические правильные CSS, его точный рендеринг на самом деле не определен. Вы можете рассмотреть display: inline-block или float: left вместо.

Другие советы

Ниже приведены только комментарии; Трудно дать окончательные ответы на такие вопросы, ESP. Когда структура HTML недоступна.

Первое, что действительно у меня было Имена длинных классов. Отказ Когда у вас так много повторений в имя Классов, я думаю, вы делаете что-то не так. Имена нравятся 

.apl_widget_fourLevel .apl_widget_level.apl_widget_level1 .apl_widget_panel img

Действительно должен быть сокращен до (что-то вроде):

.apl_widget .fourlevel .panel img

Особенно, когда ваши селекторы в основном 90% повторяются, например 

.apl_widget_level.apl_widget_level1

Там просто нет смысла для этого! В CSS каскад гарантирует наследство, поэтому добавляя префикс также все имена ваших классов просто необходимо. Уверенно, если вы дошли до точки индексация имена ваших классов, пришло время поменять их для idS, вроде

#level1

Это может казаться маленьким, но он действительно делает CSS более ремонты, если у вас есть селекторы, которые являются компактными и менее повторяющимися - по крайней мере, вы не будете тратить так много времени сканирования через селекторы.

Если HTML-структура виджета одинакова на протяжении всего кода, то вы можете на самом деле выключить некоторые из классов для элементов. Это будет, конечно, уменьшить повторное использование стиля, но, учитывая, что виджеты часто не разделяют ту же структуру и дизайн, что и остальная часть страницы, это должно быть возможно для более простых стилей виджетов, чтобы Sciamp на классах. Селекторы, как (скажем)

.profile img

наверняка будет лучше, чем просто дать это img Класс - это как сразу очевидно, что вы делаете, и легко поддерживать одновременно.

Что-то еще, что вы могли бы захотеть сделать, это Только код для особых случаев, как этот очень упрощенный случай

a {
  color: white;
  background: #666;
  text-decoration: none;
}

a.special {
  color: #B8E9FF;
}

a.brilliant {
  color: #FFAFAF;
}

Кроме того, удалите повторные классы, которые остаются одинаковыми в каждом случае. Опять же, используйте каскад до его полного потенциала.

3-5 селекторов макс не являются необычными. 3-5 для каждый одна из них, хотя. Селекторы CSS должны логически переходить от простого в комплекс, поскольку добавляются больше случаев. Таким образом, попробуйте найти основу виджета, определите по умолчанию и код своего пути вверх.

Сам фрагмент кода не слишком плохо, за исключением включения слишком большого количества и слишком длинных имен классов. Переписать снизу вверх, хотя часто может привести к оптимизации, особенно Если требования проекта изменились с момента последнего разработчика (нам не нужно поддерживать IE6, ура!) Но опять же, не видя структуры, трудно сделать окончательные решения.

Если это только для четырех кнопок, я бы потянул страницу в современном браузере и использую инструментарий разработки (Firebug in Firefox, Dragonfly в Opera, инструменты разработчика WebKit в Safari / Chrome) для проверки подходящих кнопок и посмотреть, что Эффективные стили находятся на каждом.

Возможно, вы захотите перейти эта статья Я прочитал не слишком долго, он имеет действительно хороший обзор Pro's и Con of Organing ваших CSS. Я также посмотрел на дно статьи, у него есть некоторые ссылки на дополнительную информацию.

Из взгляда вещей, которые ваша виджета стили, похоже, казалось немного за борт с классит, но, по крайней мере, его документированным, я не могу подсчитать количество раз, когда я видел недокументированные классы CSS.

Я думаю, что вам нужно изменить имя ваших сцен, я вижу, что вы используете «.apl_widget_Label» для почти всего и укладывают элемент в зависимости от селекторов.

Например:

/* the gray label in the panel 
   enforce for mini display */
    .apl_widget_fourLevel .apl_widget_level .apl_widget_label,
    .apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level.apl_widget_levelSelected .apl_widget_label {

Почему бы не создать другой класс под названием «Mini-Display», а затем ваш элемент будет похож:

<div class=".apl_widget_label mini-display">..</div>

И ваши CSS будут:

.mini-display{..}

Если вам это не нравится ... Я видел некоторые люди, которые создают такие классы

<div class="left margin-auto big red ...">..</div>

где каждый класс меняет что-то конкретное на элементе (т.е. левый => поплавок: слева;). И они похожи на библиотеку классов, которые они всегда используют.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top