代码之家 › 专栏 › 技术社区 › Rik Heywood

我如何管理这个嵌套的标记和CSS来保持简单和易于操作?

markup css

Rik Heywood · 技术社区 · 15 年前

我有以下标记,用于生成一个弹出式超级菜单(其中的.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更容易实现目标?

5 回复 | 直到 6 年前

chaos 15 年前

如果是我,我会把目标明确的类放在有问题的最终实体上,然后改变

#mainmenu li h2 a {}

到

#mainmenu .section {}

和

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

到

#mainmenu .subsection {}

什么都不是。

Ryan Florence 15 年前

就我个人而言,我认为你的HTML看起来不错,它不受源源不断的ID的困扰,而且没有一个类看起来是多余的或无用的。

如果你在任何地方都不使用h3,除了在li中、在列中、在父li中,那么你可以这样做: #mainmenu h3 a . 我真的认为你可以在选择器中不那么明确。

我试图真正地利用独特的HTML标记,这样我所需要的就是在最上面的元素上有一个ID,如果需要的话,在下面还有一些类。

Matt Brunmeier 15 年前

您可以始终使用更具体的选择器名称。而不是:

#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>

annakata 15 年前

没有看到你的CSS的其他部分,但我认为你的动机是错误的。你应该瞄准你的分数,准确反映出需要什么内容。如果 这东西 需要定义为与 那东西 它们需要作为不同的元素存在,如果不是的话。分离关注点,在你的分数达到它之前,不要考虑CSS。需要成为。

我要说的是,看起来你可能会将div.column和ul子元素折叠成ul.column,而h2中的锚可能会移动到div.submenu的内部,并给出一个“header”类。

Gabriel Hurley 15 年前

除了确保您的结构真正适合您的内容的语义,而不仅仅是出于设计原因,我还可以建议以下几点:

如果DIV中没有其他内容,则不需要将<ul>包装在<div>中。它们都是块级元素,您可以编写<ul class=“column”>,并保存一些不必要的标记。它是多余的。
如果你不使用类名在不同的地方表示不同的东西,你可能会简化你的CSS。例如,如果只使用mainmenu.mega下的“column”类,那么实际上不需要每次都指定它。只是说 .column h3 a 也一样。
如果您希望jquery简单,还可以利用css3选择器(如:not())为您进行排序。例如,而不是 $("#mainmenu li.mega .column li") 你可以改为 $("#mainmenu li:not(.mega)")

这些是我的想法。