Personally, when going to edit one of my old stylesheets, I get disgusted with the amount of scrolling I have to do. No matter how well everything is commented, it still builds a long file with an overwhelming amount of code.

About a year ago I was dealt the task to code Music In Every Direction for Konami (Keep in mind many people have been in this system since I coded it originally). They had multiple color schemes for their different game series, yet the layout for all of them was the same. That is when I stumbled (a little bit of A HA! and a little bit of I probably saw it elsewhere) on a practice of creating a global stylesheet and stylesheets for color scheme. Whereas HTML and CSS are split by content and design, respectively, splitting a CSS stylesheet up gets broken into layout/positioning and color schemes.

I split the process into three steps which I think keeps it clean and easy to go into for those who follow my path. In other words, I am being a friendly coder.

1) Building the Site - The first thing I do is code all of the HTML elements to the site. This means breaking up the sections with the naming schemes I have grown accustom to. Creating ID’s for all of the different sections and drilling down (Header, LeftColumn, RightColumn, Footer and of course a class for clearing).

2) Code the CSS - Coding both the layout/positioning and color schemes in one stylesheet all at once help clear up which portions are to be broken apart. Upon finishing a page I create a second style sheet and cut all of the color scheme elements from the original stylesheet and paste them in a similar structure.

For instance:

global.css

div#leftColumn {
width: 200px;
}

blue.css

div#leftColumn {
background: blue;
}

3) After the clean break up of the original stylesheet into two stylesheets, all that is left is to repeat and do it again for all of the different color schemes and pages. The html should be the same (other than the content) for all of the pages.

———–

In the end, one gets a very clean system. I think a lot of people are doing this way, yet I am still seeing the forever scrolling CSS page. Ultimately a good mindset to be in when building systems is to think about the people that will follow you. Often times when going into someone else’s system it feels like entering their home. I see their messes and every door opened starts with a question mark.

I’d be curious to grow.

Popularity: 8% [?]