3 ms·
I find that following a prefix method works quite well for organizing a lot CSS. For example (using sass): .home-header-h1{ font-size: 20pt;
by ryanSrich 13y ago
I find that following a prefix method works quite well for organizing a lot CSS. For example (using sass):
.home-header-h1{
font-size: 20pt;
padding: 0px;
margin: 0px;
line-height: 1.3;
}
.home-header-h1-blue{
@extend .home-header-h1;
color: blue;
}
.home-header-h1-green{
@extend .home-header-h1;
color: green;
}
This helps keep classes out of your HTML and avoids large amounts of nested CSS. Here's the compiled source:
.home-header-h1, .home-header-h1-blue, .home-header-h1-green {
font-size: 20pt;
padding: 0px;
margin: 0px;
line-height: 1.3; }
.home-header-h1-blue {
color: blue; }
.home-header-h1-green {
color: green; }
- tommmmmm 13y agoBut with classes with "green" and "blue" in the names, you're still mixing meaning and presentation and hurting maintainability. See: http://thecodelesscode.com/case/95 http://thecodelesscode.com/case/95
- Sakes 13y agoJust nit picking here, but I think your selectors are a bit redundant and long. What do you think about something like this? .home-header-h1{ font-size: 20pt; padding: 0px; margin: 0px; line-height: 1.3; } h1.home-blue{ @extend .home-header-h1; color: blue; } h1.home-green{ @extend .home-header-h1; color: green; } But I think if I was trying to truly minimize maintenance I would do something like... (in LESS not familiar with sass) h1.home { font-size: 20pt; padding: 0px; margin: 0px; line-height: 1.3; &.blue { color: blue; } &.green { color: green; } }