For a website with four pages (blog, portfolio, profil and impressum) I have four different color schemes (for links, headings, code, etc.). This results in bloated CSS which I want to reduce.
Here is a demo. You see the navigation items use the color scheme of the page it links to. In the demo we're on the blog page with a green theme. Styling the different pages works by adding a class to the root element (i.e. <html class=page--blog>
).
How can I improve this approach of styling things page-dependant?
Also what kind of naming would be appropriate? I could use the titles of the pages (page--blog
, link--blog
, …) or the colors (page--green
, link--green
, …). Other ideas/suggestions?
HTML:
<html class="page page--blog">
<nav class=site-nav>
<a href=# class=link--green>Blog</a><!--
--><a href=# class=link--orange>Portfolio</a><!--
--><a href=# class=link--blue>Profil</a><!--
--><a href=# class=link--red>Impressum</a>
</nav>
<main class=page-content>
<p>Regular paragraph, containing <a href=#>a link</a>. Crazy, huh?</p>
</main>
</html>
CSS:
.site-nav {
background-color: #444;
a {
color: white;
display: inline-block;
padding: 20px;
}
}
.link--green {
background-color: forestgreen;
.page:not(.page--blog) &:hover {
background-color: yellowgreen;
}
}
.link--blue { /* ... */ }
.link--orange { /* ... */ }
.link--red { /* ... */ }
.page-content {
a,
h1, h2, h3, h4, h5, h6 {
.page--blog & {
color: forestgreen;
}
.page--profil & { /* ... */ }
.page--portfolio & { /* ... */ }
.page--impressum & { /* ... */ }
}
}
possible solutions/ideas:
- additional CSS file only used on these sites (extra HTTP request)
- page-specific CSS in
style
tags inside the actual html document (hard to manage) - Using SASS mixins to generate the CSS for the four pages (won't reduce bloat)