CSS framework is a base of your web to make developing faster and also a way to organize all CSS, JavaScripts, [+ xslt] etc.

Typical bottlenecks

• structuring large project
• faster developing
• group developing
• easy extensibility
• future support by new developers
• using parts in future projects

Download

css_framework.zip

Basic folder structure

/framework
	/stylesheets
		/global
		/layout
		/blocks

	/javascripts
		/global
		/jquery ← or any JS framework

	/plugins

/stylesheets
	application.css ← import all styles here
	application.ie.css ← fixes for all of IE (6,7,8)
	application.ie67.css ← fixes for IE6&7
	application.ie7.css
	application.ie6.css

Explanations

/framework/stylesheets — here we are going to put all simple stylesheets without any interactive (JS)
/framework/stylesheets/global — basic styles, usually the same for every project
/framework/stylesheets/layout — styles to make page layouts, columns and so on
/framework/stylesheets/blocks — all styles for current project

/framework/javascripts — here we are going to put all simple javascripts without any layout (CSS)
/framework/javascripts/global — basic scripts, usually the same for every project
/framework/javascripts/jquery — any JS framework

/framework/plugins — here we are going to put all interactive blocks with layout

/stylesheets — connect these files to page

Name of files and selectors

We need some rules to name files and selectors, to be able to search it quicker and without any mess. First of all, we have to name a files.
example.css

But if we need the same fixes for all IE, we must create new file:
example.ie.css

Or/and we need fixes just for IE 6, we must create file:
example.ie6.css

The way to organize selectors is name it by first letter of folder where it placed, for example we have folders “global”, “layout” and “blocks”:
.g-pseudo-link { … }
.l-column { … }
.b-menu { … }

Fixes for different browsers (/framework/javascripts/global/browsers.js):
.e-webkit .b-menu { … }
.e-gecko .b-post { … }
.e-opera .b-post_featured { … }

Now we have structure of our framework and some basic rules, so we can start with styles.

Global styles

global.reset.css — reset default browser layout.
global.link.css — styles for normal and pseudo links.
global.css — another default styles.

Download sample framework to see all with IE fixes.

Blocks

The most important thing is split page on simple blocks. Then we need to give a right name to that block and write styles. For example we have block:

This is a way to show post on LOOKATME.RU home page.

So, we are creating a new folder and file and write css just for this block:
/framework/stylesheets/blocks/b-post/b-post.css

Place any pictures (if we need) close to this file.

The name of inner selectors are like this:

.b-post { ... }
.b-post .b-post-border { ... }
.b-post .b-post-border .l { ... }

Redefine existing blocks

In the same home page we have another view of post — featured post, basically it is almost the same style, but it has a little difference.

We are creating new file close to b-post.css:
/framework/stylesheets/blocks/b-post/b-post.featured.css

And here we just need to write styles to extend .b-post for new layout.
Selectors will have names like:

.b-post_featured { ... }
.b-post_featured .b-post-border .l { display: none; }

And html:

<div class="b-post b-post_featured">
...
</div>

For IE fixes we just need to create files like b-post.ie.css or b-post.featured.ie6.css or any another combinations.

Structure of plugins

/framework/plugins
	/b-search
		/javascripts
		/stylesheets
		/tests ← examples how this plugin work and how to use it

Conclusion

This is just one way to organize files that I’ve used in two large projects. I’ve used a lot of different ways before, but finally I think this one is better.

Be careful with IE because it has limit of 32 external css files. The way to solve it — join all css to one file.

Special thanks to Vitaly Harisov from Yandex for his help to solved the mess with selector names.