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

ProgramBox

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

Post author:admin
Запись опубликована:5 марта, 2023
Post category:Вопросы по программированию

#css #wrapper

#css #оболочка

Вопрос:

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

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

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

 <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;
}

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

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

Ответ №1:

На самом деле, вам не нужно делать ни того, ни другого :). Вы используете 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

Ответ №2:

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

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

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

Ответ №3:

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

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

Обновить:

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