8
\$\begingroup\$

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)
|improve this question
\$\endgroup\$
  • 1
    \$\begingroup\$ Sass is the name of the CSS preprocessor, which has 2 syntaxes: scss and sass. There's no reason to have an scss tag. \$\endgroup\$ – cimmanon Jan 23 '14 at 17:34
  • 1
    \$\begingroup\$ No. Look at the tag description for [sass]. It has nothing to do with the sass syntax. If you look over on SO, there is no scss tag, only an alias to sass (see: stackoverflow.com/tags/sass/info). \$\endgroup\$ – cimmanon Jan 23 '14 at 17:42
  • 3
    \$\begingroup\$ Meta Discussion, meta.codereview.stackexchange.com/q/1455/18427 \$\endgroup\$ – Malachi♦ Jan 23 '14 at 17:53
5
\$\begingroup\$

Some days passed and I feel like I should share the changes I have made so far.

Naming

I started using page names instead of color names on classes and variables. This leaves me with the benefit of being able to change the color scheme of an entire page only by changing the value of the color variable.

.page--home       -> .page--blog
.nav__item--green -> .nav__item--blog
$green-color      -> $blog-color

Generating page-specific CSS with a mixin

  • I need to style certain elements depending on the class I assign to the root element (e.g. <html class=page--blog>)
  • The needed arguments I pass to the mixin are $element (a selector like .site-nav or h1) and $property (a CSS property like color)
  • There also is an optional argument which allows me to switch to light color variations

Mixin:

@mixin themify($element, $property, $light-colors: false) {
    $pages: null;
    @if $light-colors == true {
        $pages: blog      $green-color-light,
                portfolio $orange-color-light,
                profil    $blue-color-light,
                impressum $red-color-light;
    } @else {
        $pages: blog      $green-color,
                portfolio $orange-color,
                profil    $blue-color,
                impressum $red-color;
    }

    @each $page in $pages {
        .page--#{nth($page, 1)} #{$element} {
            #{$property}: nth($page, 2);
        }
    }
}

/* Call the mixin without optional argument */
@include themify(site-nav, background-color);

/* ...use the light colors instead of the normal ones */
@include themify(site-nav, background-color, $light-color: true);

Problems with the mixin:

  • I can't pass a list of selectors like a, h1, h2, h3, h4, h5, h6 – Didn't find a solution so far (probably going to involve multi-dimensional lists)
  • Still creates the bloated CSS, but eases my work

I still would love to hear some suggestions/improvements.

|improve this answer
\$\endgroup\$
1
\$\begingroup\$

I hope someone proves me wrong, but I don't think you will be able to decrease your css. Unless you code it in php and only include the css on those specific pages

Such as

if ( is_home() )
{
#include 'home.css';
}
else (is_blog())
{
#include 'blog.css';
}

and so fourth.

But what i have done when using css is create a file named main.css and put all my @include 'xxxxx.css' in there. then i just have a single line in my header that includes the 'main.css'

It works.

You might want to also look up LESS. it is a way to partially program css with php if i understand correctly.

|improve this answer
\$\endgroup\$
  • \$\begingroup\$ 1. I'm using SASS and have my several SCSS-files for things like site-nav, pagination, etc. 2. I could add the CSS to the HTML documents, but this is a maintainance nightmare. 3. I'm hosting with GitHub Pages. PHP is not possible. \$\endgroup\$ – kleinfreund Feb 24 '14 at 18:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.