Quite often when I design a website for a customer, I design his website with one (or multiple) CSS files that makes up the entire presentation layer. The thing is, usually, the customer's needs change drastically in terms of "website theming". He may end up asking to change from a blue/green color-based theme to a red/orange based one according to his tastes. The thing is, my file contains all the information including:
What are the best practices for "decoupling" a CSS file to make it "theme" aware, while maintaining all its information on positioning?
My list of possible practices are as follow:
EDIT: according to the great answers provided below, I updated the list of other possible solutions adding up to my list:
Which would be better in which possible case? Are there any other easily maintainable and flexible ways?
Best answer to date: Using SASS to make very flexible stylesheets. Of course this implies the slight learning curve, but according to a few reviews, SASS seems to be the next approach for dynamic stylesheets (along with HAML).
Here are 30 of the best CSS practices that will keep you writing solid CSS and avoiding some costly mistakes. 1. Make It Readable The readability of your CSS is incredibly important, though most people overlook why it's important.
Over time and with experience, you will learn to get rid of the CSS errors by implementing the CSS practices that are best for your website design. 1. Implementing the CSS Reset 2. Providing Style Sheet Information 3. Organizing all Elements of the Stylesheet 4. Shrinking CSS File Size using CSS Compressors 5.
CSS is a language that is used by nearly every developer at some point. While it's a language that we sometimes take for granted, it is powerful and has many nuances that can help (or hurt) our designs. Here are 30 of the best CSS practices that will keep you writing solid CSS and avoiding some costly mistakes. 1. Make It Readable
However, when it comes to writing CSS code, this might not be a good practice, as it might become difficult for others or yourself to locate the CSS code elements within the stylesheet. They can be ordered starting from inclusive styles, which include body, H1, p, a and similar ones. These should be followed by a header and a footer.
You should look into SASS, specifically their "Mixins" feature. It takes CSS and introduces a very DRY programmatic approach. You can override existing classes with it, making it perfect for what I think you're trying to do.
Link
Consider the approach suggested by OOCSS. The general idea is to separate the style concerns of your classes into more granular units, so that you end up using more classes in your markup instead of hanging all of your styling on too few classes with overlapping concerns.
This can be combined with some of the other suggestions. (I highly recommend authoring SASS with Compass!)
In situations where a theme is required I, personally, tend to use three base-stylesheets:
There is an awful lot of repetition in this approach, though, so @treefrog's answer may well be a better approach. The one saving grace I can offer for my approach, which is why it works well for me, is that it's easy to know where to go to change the title font from Arial to Times New Roman (or whatever), and where to find the background-colours for the page. Typically these are stored in a Wordpress-like arrangement:
http://www.example.com/css/reset.css
http://www.example.com/css/themeName/typography.css
http://www.example.com/css/themeName/layout.css
I know about a techniques based on using so-called independent blocks. A block here is a part of the page that can be described by its own layout and its own styles. There are some principles of that techniques like using only class attribute, not id; each block has a prefix; no styles outside blocks or minimum global styles. But those are optional more or less. Suppose you have a block:
<div class="b-my-block">
<span>some more content</span>
</div>
And a style for that block:
.b-my-block{
width:100%;
height:300px;
}
.b-my-block span{ background:red; }
'b' here is the prefix for the block. You can have different prefixes for you needs. You may want to use prefix 'g' for some global classes that can be applied to and modify any other elements.
Then, if you want to extend this block or change it somehow, you can create a modification of this block with a class 'b-my-block_blue' for example:
<div class="b-my-block b-my-block_blue">
<span>some more content</span>
</div>
and a piece of css:
.b-my-block_blue span{
background:blue;
}
This a very very rude example. And i'm not sure if i was explanatory enough. But i'm trying to use this technique in my current project and it feels pretty good so far. There is an article on this in russian. Maybe someone could translate it in english, if it has some interest for the people here.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With