Этот вложенный беспорядок - это то, как выглядит макет моей таблицы стилей less (за вычетом любых реальных стилей):
#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?
