CSS External File Organization

Separation of content and layout is one of the many advantages that has made building web pages with CSS today's standard. It's always recommended that you separate your content(HTML), layout(CSS) and functional code(javaScript) into separate files so that you can manage and serve them seamlessly from independent sources.

I also recommend dividing your layout work onto three different CSS files each dealing with their own piece of the layout puzzle. This will help ease implementing new features and designs to your website as well as dramatically cut down on the size of the your web page's file size.

this_elements.css

Create a file to manage all common CSS elements like your dynamic buttons and fluid modular round cornered backgrounds. Your design might use a red 'attention' box that floats near content that contains an important tip for your users. You will be able to easily update the look and feel of your site by keeping the code for these commonly used elements in this file. Link to this file separately and switch up the layout files as needed.

this_layout1.css, this_layout2.css, this_layout3.css

Most sites change layout from page to page. Some pages require a two column layout and others might need three. As the layout changes from page to page create a separate CSS file for each unique page format. Things such as column widths, number of columns, text-alignment, and margins should be included here. You will cut down on your CSS load times by toggling between files that contain relevant code for a page rather than having one CSS file bringing along the unnecessary layout info for all your pages.

this_style.css

This file is where all the pretty is loaded from. Create this CSS file to control the font attributes of text elements and background color/images. This file controls the branding of your site and can be a powerful tool as a developer when you need to reuse some old brilliant code or template sites out. You can even make your this_elements.css style-dependent on this file allowing a few lines of code to control all your design updating and template shifting needs.

enjoy.