このネストされた混乱は、私の少ないスタイルシートのレイアウトがどのように見えるかです (実際のスタイルを差し引いたもの):
#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 スタイルシート全体の例を 1 つも見つけることができませんでした。