Как мне управлять этой вложенной разметкой и CSS, чтобы упростить и облегчить работу?

Question

У меня есть следующая разметка, которая используется для создания мегаменю во всплывающем стиле (для каждого столбца есть столбец .column div, хотя в приведенном ниже примере есть только один столбец) ...

<ul id="mainmenu">
    <li class="mega">
        <h2><a href="/">Menu 1</a></h2>
        <div class="submenu col1 leftmenu">
            <div class="column">
                <ul>
                    <li><h3>Sub Menu Heading</h3></li>
                    <li><a class="hilight" href="#">Do Something</a></li>    
                    <li><a class="hilight" href="#">More great stuff</a></li>
                    <li><a href="#">Another Item</a></li>
                </ul>
            </div>
        </div>
    </li>
    <li class="mega">
        <h2><a href="#">Second Menu</a></h2>
        <div class="submenu col3 leftmenu">
               blar blar blar
        </div>
    </li>
    // more menus here    
</ul>

Поскольку это достаточно глубоко встраивается с довольно многими похожими тегами (<li> <a>), мне понадобился довольно ужасный список селекторов для стилизации его в css, например.

#mainmenu li h2 a {}
#mainmenu li.mega .column li h3 a {}

Кто-нибудь может предложить какие-либо улучшения в разметке, чтобы было проще ориентироваться с помощью CSS и jQuery?

Answer 1

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

#mainmenu li.mega .column li h3 a {}
and
<ul id="mainmenu"><li class="mega"><div class="column"><li><h3><a>

использование

h3.mega_column a {}
and
<ul id="mainmenu"><li class="mega"><div class="column"><li><h3 class="mega_column"><a>

Answer 2

Лично я думаю, что ваш html выглядит хорошо, он не страдает от бесконечных идентификаторов, и ни один из классов не кажется избыточным или бесполезным.

Если вы никогда не используете h3 нигде, кроме внутри li, внутри столбца, внутри родительского li, тогда вы можете сделать: #mainmenu h3 a. Я действительно думаю, что вы можете быть менее явными в своих селекторах.

Я стараюсь по-настоящему использовать уникальные html-теги, чтобы все, что мне нужно, - это идентификатор самого верхнего элемента и несколько классов под ним, если необходимо.

Answer 3

Если бы это был я, я бы поместил классы с хорошим таргетингом на конечные объекты, о которых идет речь, и изменил бы

#mainmenu li h2 a {}

до

#mainmenu .section {}

и

#mainmenu li.mega .column li h3 a {}

до

#mainmenu .subsection {}

и еще много чего.

Answer 4

Помимо проверки того, что ваша структура действительно соответствует семантике вашего контента, а не только по причинам дизайна, я могу предложить несколько вещей:

1. Вам не нужно оборачивать

2. Возможно, вы сможете значительно упростить свой CSS, если вы не используете имена классов для обозначения разных вещей в разных местах. Например, если вы используете только класс «column» в разделе #mainmenu .mega, тогда нет необходимости каждый раз указывать его. Просто сказав .column h3 a, вы получите то же самое.

3. Если вы хотите простоты в jquery, вы также можете воспользоваться селекторами CSS3, такими как: not (), чтобы разобраться за вас. Например, вместо $("#mainmenu li.mega .column li") вы можете вместо этого сделать $("#mainmenu li:not(.mega)")

Это мои мысли.

Answer 5

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

Я скажу, что похоже, что вы можете свернуть div.column и дочерний элемент ul в просто ul.column, а якорь в h2 можно переместить внутрь div.submenu и получить класс "header" пример.