1

这个嵌套的混乱就是我的较少样式表的布局（减去任何实际样式）：

#branding {
    h1 {

    }
    #tagline {

    }
    .ticker {

    }
    nav {
        ul {
            li {
                a {

                }
            }
        }
    }
    #search-form {
        input {

        }
        button {

        }
    }
}
#masthead {
    #store-locator {

    }
    #slider {
        ul {
            li {

            }
        }
    }
    #events {
        article {
            img {

            }
            h4 {

            }
            p {

            }
        }
    }
}
#main {
    #buckets {
        ul {
            li {
                img {

                }
                h3 {

                }
                .description {
                    .author {
                        a {

                        }
                    }
                    p {

                    }
                    blockquote {

                    }
                }
                .more {

                }
            }
        }
    }
    #social-feed {
        hgroup {

        }
        #filters {
            ul {
                li {

                }
            }
        }
        #feeds {
            .feed-column {
                > div {
                    img {

                    }
                    h3 {
                        span {

                        }
                    }
                    .description {
                        p {

                        }
                        .author {
                            a {

                            }
                        }
                    }
                }
            }
        }
        #feed-amount {
            a {
                &:before {

                }
                &:after {

                }
            }
        }
    }
}
#summary {
    nav {
        ul {
            li {
                a {

                }
            }
        }
    }
    #newsletter-form {
        h4 {

        }
        input {

        }
        button {

        }
    }
    #stay-connected {
        h4 {
            a {

            }
        }
    }
    #donation {

    }
    #contact-info {
        #contact-number {
            span {
                strong {

                }
            }
        }
        #contact-details {
            address {
                strong {
                    a {

                    }
                }
            }
            p {

            }
        }
    }
}

这在某些方面对我来说很有意义，因为它模仿了标记的布局，但它有一些严重的缺点，例如过于具体的选择器，IE：

#main #social-feed #feeds .feed-column > div .description p {}

我的问题是，有什么更好的方式来布置这份文件？

我在这里滥用 LESS 吗？我搜索了“LESS 样式表示例”和类似的东西，但我找不到一个完整的 less 样式表的示例——谁能给我提供一个精心制作的 less 文档的示例？

4

2 回答 2

2

如果 LESS允许嵌套选择器，那么这并不意味着您必须这样做。只需做与使用常规 CSS 相同的事情即可。

如果您的目的只是视觉层次结构，那么您可以在没有真正嵌套的情况下执行此操作：

#social-feed {
    /**/
}
    #feeds {
        /**/
    }

嵌套 id 选择器（如 ）通常没有意义#foo #bar（只要您的元素层次结构在不同页面中是持久的）。

此外，在适用时使用子组合器是有意义的：

nav {
    & > ul {
        & > li {
            & > a {

            }
        }
    }
}

这样生成的选择器 ( NAV > UL > LI > A) 可能比上下文选择器 (NAV UL LI A或NAV A) 工作得更快。

于 2013-01-04T21:14:30.983 回答
1

像您这样说明的选择器膨胀是“严重的缺点”之一，这就是为什么我会谨慎使用选择器的嵌套。对我来说，让 CSS与标记的布局完全匹配并不是那么重要。我可以使用一些稀疏的注释来帮助我了解我在 CSS 中的“部分”。所以让我来谈谈我如何改变事情的一些想法。

保持靠近，不必嵌套

例子

/* branding */

#branding {
    h1 { }

    .ticker { }

    nav {
        ul { }
        li { }
        a { }
    }
}

#tagline { }

#search-form {
    input { }
    button { }
}

讨论

首先，请注意如何将评论作为我的部分标题，而不是仅使用 对#branding所有内容进行分组。这是我保留的一些“结构”，如 html，我按主要的“包装”标题分组，并使它们彼此靠近。

其次，任何id标签都应该有自己的顶级嵌套组，假设您正确地构建了 html以保持 id 对页面是唯一的。我认为唯一的例外是，如果您在body元素上使用某个类来切换页面上的外观，并且该外观更改的一部分包括对所选元素的样式进行更改id（但即使这样也可以通过仍然将idas顶层；请参阅&下面的“利用力量”）。所以我已经把你的#tagline和#search-form从下面的窝里拉出来了#branding。

第三，考虑您的设计和代码以尽量减少臃肿。例如，如果您nav在页面上有其他元素（侧栏中的子导航等），那么嵌套navin#branding是值得的。同样，如果您在该包装器之外有其他用途h1或用途。.ticker然而，我鄙视的一个常见的巢是ul li a巢。如果里面唯一的列表nav是ul，那么没有理由将它嵌套在li里面并最终出现ul li在你的选择器字符串中，因为它是一个给定的，所有的li都位于那里。同样，如果 中的唯一a标签在nav列表内，则无需嵌套。有这个CSS...

#branding nav ul { }
#branding nav li { }
#branding nav a { }

...与完整的嵌套版本相比，它的选择器字符串同样干净且不那么臃肿。

利用 & 的力量

我喜欢使用&将关键父级添加到代码中的想法。回想一下上面关于在body元素上添加一个类以控制跨页面的主题（或外观）的异常。你可以将它嵌套在主题类中，或者你可以这样做：

例子

#branding {
    .theme1 & { }
    .theme2 & { }

    h1 { }

    .ticker { }

    nav {
        ul { }
        li { }
        a { }
    }
}

讨论

然后会产生一个选择器，比如通过主题类.theme1 #branding改变外观。#branding如果您需要它来更改嵌套在其中的项目的属性，有多种方法可以做到（这在很大程度上取决于您希望最终输出看起来像什么结构）。一种方法是仅将其添加到需要的内容中：

例子

#branding {
    .theme1 & { }
    .theme2 & { }

    h1 { 
      .theme2 & { //special code only for theme2 here }
    }

    .ticker { }

    nav {
        ul { 
          //main code here
          .theme1 & { //special code here }
          .theme2 & { }
        }
        li { }
        a { }
    }
}

讨论

缺点是代码中的.theme类有一些额外的重复，而这样做的好处是它将端点目标分组，所以例如ul上面会产生这样的代码......

#branding nav ul {}
.theme1 #branding nav ul {}
.theme2 #branding nav ul {} 
#branding nav li {}
#branding nav a {}

...这使所有各种ul代码彼此相邻。现在，如果li和a元素也需要在主题上进行更改，您必须决定是否要将主题上移一个级别，以便特定主题的ul,li和按主题a彼此相邻分组，或者是否保留它在像上面一样的最低级别，以便每个,和保持按实际设置样式的端点标记分组。ullia

当然，使用&to append 通常在嵌套中仍然有用，所以...

a {
  &:hover {}
}

a:hover {}...无论嵌套多深，生成信息a都是嵌套和&组合的一个很好的用途。

结论

关于这个问题，当然还有更多可以说的。关键是在需要的地方利用预处理器的功能，而不仅仅是因为它可用。对我来说，mixin 是预处理器中比嵌套更有用的部分。

于 2013-01-04T21:22:40.723 回答