Working on large css files

[joliett89]

I have a large css file that I want to modify (about 850 lines) and I am wondering what would be the best way to do that.
I've been looking at Chrome's Developer Tools and I am able to find code related to particular parts of the website and turn it on and off to see what it does etc (checkboxes).
I've been reading a lot about css and html on the net lately, and I have experience also, but redesigning a large website like this (video tube script) does not seem like an easy thing to do etc.

I was wondering if somebody could tell me, from experience, what would be the best way to approach that and how not to spend 3 years figuring out what is what in the code and how it relates to other parts etc.

Thanks in advance for any info.

[lucy24]

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.

[rocknbil]

Welcome aboard joliett89,

I was wondering if somebody could tell me, from experience, what would be the best way to approach that and how not to spend 3 years figuring out what is what in the code and how it relates to other parts etc.

Install and develop with FireFox or Chrome if you haven't already. Chrome has this built in, but if using FireFox, install the FireBug extension. This will allow you to right-click any element and select "Inspect element." This will open a pane at the bottom of the window, the left half will be the HTML, the right, selectors affecting that element. It will say "style.css line 643" . . . and show the selectors.

Second is a really really good text editor. I still use HomeSite, but Adobe killed it when they bought Macromedia . . . haven't found anything that beats it yet.

[joliett89]

Thank you for your answers so far.

I've been using Firebug, IE and Chrome Developer tools already. Chrome is good because it not only shows the code for particular elements on the website, but there is also a way to turn the rules on and off (checkboxes next to the code) in real time to see what effect it has on the website too.

Somebody also recommended [gtmetrix.com...] and "Minimize CSS" option, which strips about 15% of the code. I am not sure what kind of effect it has on the website though, because I dont have access to my own copy of the program right now.

The program itself consist of 126 tempalates that fall together to make a website. I know that I am gonna get rid of some of them and try to make the xhtml code as simple as possible before I start working on anything else.

Somebody also recommended erasing all the ids and classes and starting writing the website all over again, but I am not sure whether this solution is gonna work or not.

@lucy24 Can you tell me more about the "utilities" that I could use for this. I guess these would be programs that split the CSS code into smaller pieces? I never heard of anything like that before, but I am fairly new to this also.

@rocknbil I am using Notepad++ for this so it should be good for now.

[edited by: alt131 at 6:26 pm (utc) on Aug 15, 2011]
[edit reason] Thread Tidy [/edit]

[lucy24]

@lucy24 Can you tell me more about the "utilities" that I could use for this. I guess these would be programs that split the CSS code into smaller pieces? I never heard of anything like that before, but I am fairly new to this also.

Drat. I was hoping someone else would jump in and say that they swear by such-and-such. I, uhm, ahem, do it all by hand in a text editor. (SubEthaEdit, Mac only but produces bilingual output, any mode you need-- CSS, Javascript etc-- and has a full HTML preview using Apple WebKit.) This is no biggie if you're normally working on a single big file (I do e-texts) or a cluster of very similar ones.

[tangor]

I keep things even more simple (these are my rules for what I do, YMMV!)

No more than H1 and H2 (with only ONE H1 on any page)
No more than 3 font-size declarations and ZERO font colors
No more than 2 columns with header/footer (and usually 1 column plus header/footer)
No more than 3 divs (excluding above) on any page.
No more than 3 images on any page greater than 1,000 words.
Zero iframes.
Zero js
Text aligns are limited to center and paragraph (I like justified paragraphs)
And a hover/background on links.
Done.

Simple, neat, clean, displays in all browsers at all resolutions.

What works for me may not work for others. But I do strongly suggest that simple will do better than complicated every day because EVERYDAY one has to work with the page/content. If complicated it becomes all too easy to screw up.

[alt131]

Hi joliett89, and welcome to WebmasterWorld

The program itself consist of 126 tempalates that fall together to make a website

A great question because many coders start with templates like this. However I suggest the best place to start is to ask what your end goal is: While 850 lines of css sounds a lot, and probably could be refined, that number of html templates suggests to me the major redundancies, inefficiencies and issues are probably not in the css itself.

So I'd ask why you are doing this, and what you are wanting to achieve.

For example, "efficiency" is currently fashionable, so a search on "minimise css" will produce lots of techniques to minimise/compress existing css that will help increase the page speed score, for example. However, most techniques just squish larger files rather than dealing with the underlying issue - whether large numbers of large files are required in the first place.

Alternatively, if your goal is to produce clean, efficient and simple code, then it would probably be easier to re-write the site rather than try to work around 126 html templates. However, that has a learning curve and depending on your ultimate goal, may not be a good use of your time. A mid-way point might be to move to a more simple template system. Unless you actually need xhtml, I'd also recommend moving to html as well.

In terms of tools to identify redundant css, there are the firefox/firebug extensions "Dust me selectors" and pagespeed's "Unused selectors". However, use with care as they are not 100% reliable.

[joliett89]

This is a movie video script that I am working on. I want to get rid of some of the templates (more than a half if I can) because there is a lot of functions I am not gonna be using (like add video to favorites, create a playlist etc) and also redesign the look of the page.
It was made to look that way to get people to pay more for redesign after buying the script. I want to split it all into pieces one by one and learn the program and how to modify every aspect of it if I want to. It is XHTML, CSS, Ajax, Smarty.
Page works good, it is efficient and everything, it is mostly about the look and functions that I am not gonna be using.
Just wondering about the general approach to this etc, since I have never done it before.

[alt131]

Thanks for the extra information joliett89, this concerns me:

It was made to look that way to get people to pay more for redesign after buying the script.

Given you want to modify/re-design the script, and the terms of purchase specifically require further payment to do so, it sounds as if your plan would be a direct breach of the terms of sale/purchase.

However, in terms of your goal, in very simple terms, Smarty is a templating system based on php, ajax is based on javascript and together they produce the html and css that is output to the browser. To understand how this "fits' together, I suggest you start by analysing which parts of the html document are being output by which scripts. That would probably require some knowledge of Smarty and Ajax (and their underlying technologies). Once you understand how the html is produced and have modified the back-end scripts to delete/modify the functions you do/don't want so you have the html you require, then focus on using css to style it.

I realise this is the reverse of your original approach, and doesn't answer the question you originally asked, but css styles html, so is last in the "chain" of delivering content to a user.

Another approach, and what will be necessary if the terms of sale/purchase prohibit modifying the templates as I suspect they will, is to re-write yourself. That would require analysing your pages to identify what components you want. To use a very simple example, each page might be static, with a carousel for showcasing movies. That could be easily coded in html, with a freebie php/javascript script for the carousel. However, while that might work for a smaller site, it could be unmanageable for a larger site with lots of movies that require some form of databasing.

While we can help with the css, given your overall goal (assuming you are not prohibited from modifying the templates), I think it would be worthwhile asking about the best way to manage the site in the CMS (Content Management Systems) forum, or perhaps PHP - which seems to get lots of questions about Smarty itself.