Лучше ли переключать дисплей: нет;на несколько связанных элементов по отдельности, или обернуть их в другом элементе div и переключить его? - PullRequest
Новая
       8

Лучше ли переключать дисплей: нет;на несколько связанных элементов по отдельности, или обернуть их в другом элементе div и переключить его?

2 голосов
/ 22 октября 2011

Допустим, у меня есть три элемента div с классами a, b и c соответственно.Я хочу использовать css для переключения отображения этих элементов между none и block, в зависимости от того, имеет ли родительский элемент класс current или равен hovered.Элементы всегда переключаются вместе, а не по отдельности.

Я могу a) включить отображение элементов по отдельности или b) обернуть их в четвертый блок, который в противном случае не работает, и переключить отображение навместо этого элемента.

Так, например, это так: 

<li>
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
</li>

li > .a,
li > .b,
li > .c {
  display: none;
}

li:hover > .a,
li.current > .a,
li:hover > .b,
li.current > .b,
li:hover > .c,
li.current > .c {
  display: block;
}

против этого: 

<li>
  <div class="wrap">
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
  </div>
</li>

li > .wrap {
  display: none;
}

li:hover > .wrap,
li.current > .wrap {
  display: block;
}

Существует очевидная разница code-cleanliness в CSS,за счет некоторой дополнительной структуры html, но я думаю, что сеть выступает за использование оболочки.

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

Ответы [ 3 ]

3 голосов
/ 22 октября 2011

На самом деле, вам не нужно ничего делать :). Вы используете CSS! Учтите следующее: 

<!-- Notice the space between the class names -->
<li class="switch">
    <div class="a toggle"> ... </div>
    <div class="b toggle"> ... </div>
    <div class="c toggle"> ... </div>
</li>

Теперь вы можете сохранить элементы стиля для a, b, c. Добавив простой стиль CSS, вы можете быстро и легко удовлетворить оба ваших набора потребностей. Кроме того, он абстрагирован, так что вы можете использовать его в большем количестве мест, когда это необходимо. Нет необходимости в добавлении элементов DOM и никаких реальных изменений в вашем текущем коде стиля для a, b и c. Кроме того, ваш переключатель даже не должен быть li. 

.switch:hover > .toggle,
.switch.current > .toggle { display:block;
}

Дополнительная информация о классах CSS

Элементы могут быть более чем одного класса. Используя это, вы можете отделить псевдо-функциональность от просмотра вашего CSS. При использовании нескольких классов браузер объединяет правила обоих для завершения своего стиля.

Примите во внимание следующее: 

<body class="article twocolumns">
  • Элемент body будет иметь любое позиционирование в формате html и общий переопределение документа.
  • Класс article будет иметь любые стили представления, которые вам могут понадобиться.
  • twocolumns будет иметь те параметры макета, которые вам нужны.

Вы можете указать индивидуальный или комбинированный стиль, например: 

body { 
    margin:0 auto; 
}
.article { 
    background-color:white;
}
.twocolumns {
    background-image: url("divider.png");
}

/* This is a combination style. Notice no space between the two classes. */
.article.twocolumns > div { 
    padding:15px; 
    float:left; 
    width:50%; 
}
/* A possible further extension. */
.article.onecolumn > div {
    padding:20px; 
    float:none; 
    width:100%; 
}
.article.threecolumn > div { 
    padding:10px; 
    float:left; 
    width:33%; 
}

Научиться делать что-то таким образом имеет ряд преимуществ. Это позволяет вам абстрагировать функциональность, элементы макета и презентации, что позволяет вам «портировать» любой другой веб-проект, который у вас может быть. Это позволяет вам найти то, что работает кросс-браузер более эффективно для более унифицированного внешнего вида. Это также снижает вероятность случайной настройки правил, которые могут не иметь отношения к вашей проблеме. Наконец, это уменьшает вашу зависимость от посторонних элементов DOM, позволяя вам поддерживать производительность.

Надеюсь, это поможет. FuzzicalLogic

1 голос
/ 22 октября 2011

Я бы предпочел более чистый HTML, более сложный вариант CSS, потому что:

  • Затем HTML может описывать фактические данные, которые будут отображаться более точно.
  • Чем больше CSSвероятно, изменится, например, вы могли бы пожелать, чтобы класс 'c' оставался видимым повсюду, а наличие независимого контроля над этим с самого начала облегчит обновление.

Что касается производительности браузера, я бы сказал, чторазобрать еще несколько строк CSS будет гораздо быстрее, чем создать новый объект DOM для дополнительного элемента div со всеми перехватами в событиях javascript, которые это влечет за собой.

0 голосов
/ 22 октября 2011

Всякий раз, когда вы вносите изменения в DOM, вам всегда нужно сводить количество изменений к минимуму. Изменения в DOM инициируют перекомпоновку браузера - для запуска всех элементов на странице и их «перерисовки». Это происходит довольно быстро, но это не займет много времени, прежде чем вы увидите дрожание (наиболее заметно с анимацией).

Если у вас есть возможность использовать только 1 перекомпоновку вместо 3, как правило, вы должны использовать эту опцию. Когда вы говорите только о нескольких десятках опрокидываний, которые происходят только один раз (например, щелчок), вы не видите значительной экономии. Но когда вы начинаете заниматься анимацией или анимацией чего-то, скрывая других, экономия становится намного заметнее.

Обновление:

В этом ответе предполагается, что вы используете javascript, потому что в вопросе говорится «оберните их в другой div и переключите его». Если вы не используете JavaScript для динамического добавления или удаления классов CSS, то вы ничего не переключаете (а просто устанавливаете их), а также этот ответ не применяется.

...