<\/p>\nI can’t stand articles that make you read two pages before getting to the point. With that in mind, let’s look at how I think css code should be organized.<\/p>\n
<\/p>\n
In a nutshell:<\/strong> css code should be divided up into at least 4 separate pages:<\/p>\n How about we call this the ‘killer’ css structure.<\/p>\n \ud83d\ude42<\/p>\n Before I go into the details of what each css file contains (if it’s not already obvious), I want to quickly cover WHY you might want to use this basic css structure for all your websites. <\/p>\n <\/p>\n Why use the ‘killer’ css structure?<\/strong><\/p>\n It all comes down to one of the key reasons for using css in the first place: <\/p>\n Grouping code so that it is easier to update and easier to understand.<\/em><\/strong><\/p>\n –<\/p>\n A common mistake<\/strong><\/p>\n What I see over and over again, are web designers who put all their css code into one css file. This is indeed a big leap forward from using font tags all over your website … but by having only one huge css file, you’ve just created another big messy file to deal with. <\/p>\n To the point<\/strong><\/p>\n Page-structure.css contains only css that defines the structure of your page. That is to say things like:<\/p>\n – css code that sets whether the page is liquid of fixed. etc …<\/p>\n I like to put the page structure code in its’ own file because page structure css code is verbose (there’s a lot) and it can get a little black-magical. <\/p>\n What is black-magical css?<\/strong><\/p>\n We all know that except for the simplest css layouts, it can be a real pain in the ass to get page layout to work in css. <\/p>\n … Especially when floats and Internet Explorer bugs come into the mix. <\/p>\n Anyway, the point is that css for page layout often contains nonsensical (black-magical) code to make it work. <\/p>\n OK, back to page-structure.css:<\/strong><\/p>\n Another reason to have page-structure.css, is that once you’ve done creating your page structure, you rarely have to go into that code. So why bother having to scroll past it every time you edit other parts of your css? <\/p>\n Personally I find myself tweaking css rules for text, color and images much more than I do page structure css. <\/p>\n Text-styles.css<\/strong> contains css code that only affects text. So I have all my header tags defined along with paragraph tags and classes. Again, when needing to edit some aspect of my text for the hundredth time … I just pop open the very clean and simple text-styles.css.<\/p>\n Misc.css<\/strong> is a style sheet that contains css code that does things other than page structure and text styling. This ultimately is a judgment call, but I typically put in formating for tables, forms, list or special id’s and classes.<\/p>\n\n
\n– css code that sets whether the page is centered or justified left.
\n– css code that sets up the columns<\/p>\n