This nested mess is what the layout of my less stylesheet looks like (minus any actual styles):
#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 {
}
}
}
}
This makes sense to me in some ways because it mimics the layout of the markup, but it has some serious drawbacks such as overly specific selectors, IE:
#main #social-feed #feeds .feed-column > div .description p {}
My question is, what would be a better way to lay this document out?
Am I abusing LESS here? I searched "LESS stylesheet examples" and similar things, but I could not find one single example of a less stylesheet in its entirety--can anyone provide me of an example of a well-crafted less document?
