Page is a not externally linkable
- Code, Content, and Presentation
-- CSS
---- Working on large css files


lucy24 - 3:48 pm on Aug 15, 2011 (gmt 0)


What does the file look like right now? (NOOOO! Don't post it!) If it's 850 lines of formless mess, you will need to start by changing it into a few thousand lines of beautifully organized and annotated CSS. The extra lines are not new material; they're the result of breaking each complete declaration {in brackets} into separate lines for each semicolon-delimited element. Later you can backtrack and worry about saving bytes.

Start with basic sorting: everything to do with headers in one place, everything to do with tables in another, and so on. This is also where you find contradictions and redundancies. Annotate everything, even if the annotation currently says
/* I have no idea where the ### this part is used */

If it's a big site with clearly distinct areas, you will probably want to pull out directory-specific styles and put them in secondary stylesheets so pages don't have to waste time reading css that they will never use. You'll have a top-level CSS for things that are the same everywhere, like basic colors and header styles, default paragraph formatting and so on.

Somewhere along the line you'll need to identify where every single piece of CSS is used, and get rid of the bits that aren't. But keep a few defaults: for example, if you currently have only <h1> through <h4>, don't get rid of <h5> and <h6>. There are utilities that can do this for you so you don't have to go around manually ticking off 850 items.


Thread source:: http://www.webmasterworld.com/css/4351537.htm
Brought to you by WebmasterWorld: http://www.webmasterworld.com