Topic: Stylesheet Best Practices

Topic type:

Outlining techniques that help make your theme work better for you and future theme developers.

Here are some theme CSS file best practices for everyone's benefit:

CSS file naming and length

It is not mandatory, but you should use many small logically named CSS files in your theme to break up logical groupings of rules, rather than loading everything into one or two big files.

For example, rules about the "header" area of a Kete layout should go in a your_theme/stylesheets/header.css.  If you have a lot of header rules you might consider splitting this up further.

I can hear the CSS experts reading this thinking to themselves that "many files makes your styles load slower in your browser because it will only download a small amount of them simultaneously".  Thankfully Kete handles this for you and you can have the best of both worlds.

Kete will take all the files in the theme's stylesheets folder and combine them for you so they are one download (and thus quicker to get) for the user, so you don't have to worry about that issue.

By breaking rules down into logical "building block" files, you have the following advantages:

* future developers can easily see what rules they need to grab in order to reproduce a particular look in your styles

* it is also easier to eliminate a particular logical set of rules. Don't like a theme's header?  Just replace the custom header.css file from the theme with your version or simply delete the file to have it revert to the default themes rules, etc.

* it is easier to find where differences between rules are in an old and new version

Add your Kete Theme CSS Best Practices below


Discuss This Topic

There are 0 comments in this discussion.

join this discussion