Solved

How to remove unused CSS between multiple pages?

Posted on 2013-12-12
5
359 Views
Last Modified: 2013-12-22
I have 2 pages that use 3 css files.  A lot of the CSS in the files are redundant.  Some of the CSS neither page uses.  And some of the CSS is used by one page, but not the other.

Each page uses some CSS that the other page doesn't use.  I want to combine all the CSS into one file for both pages, but I want the minimum amount of CSS in the single file that both pages use.   What is the best way to do this?

I went to "unused css" which will look for unusued css in a single page, but that doesnt help me.  If I remove all the unused CSS for page A, then page B won't work.  If I put all the CSS into one giant file, I want to remove all unused CSS for the COMBINED URL's of page A and B.
0
Comment
Question by:arthurh88
  • 2
  • 2
5 Comments
 
LVL 18

Expert Comment

by:Rartemass
Comment Utility
First I would add the CSS reset code at the start of a new file. This will set everything to no value so there are no unexpected issues. This link has the code to do that.
http://www.cssreset.com/

I would need to look at your site for specifics but I suspect you are modifying styles on tags as a whole. For example you are applying a style to the <p> tag. If you want a different style for <p> on each page, then you should use IDs and classes <p class="page1"> <p class="page2"> etc. Then in CSS you set the style that all <p> tags across all pages have in common to the default <p>, then change the style elements that differ on each page in the class under .page1

There are some scripts that can attempt to combine and minimise the styles but they may not suit your purposes. Here are links to try out:

http://www.codeproject.com/Articles/141931/Combine-Multiple-CSS-Files-into-One-File-and-Minif

http://yui.github.io/yuicompressor/

Running the above scripts prior to manual changes should reduce the workload, then run them again after all changes are made in case you added some duplication.
0
 

Author Comment

by:arthurh88
Comment Utility
hi.  thanks for your advice.  ill have a look and see if it helps.

here are the pages.

http://bit.ly/JkhwLM    this uses one css file called main_small.css

and the other one:  
http://bit.ly/JkhJyr
which uses 2 other CSS files that have many overlapping (and some unique) tags of the first one, as well as probably many unused tags.

I want a single css file that both of those pages would work on.
0
 
LVL 18

Accepted Solution

by:
Rartemass earned 250 total points
Comment Utility
From a quick glance you definitely have redundancy between the style sheets. You seem to have the layout already as suggested with classes and IDs so you shouldn't need much coding in that regard.

Use one of the compressors see what the output gives you.
Comment out the existing links to style sheets and add in the new one and see how the site looks. If an element is incorrect you can address that starting from the top and working down.

The immediate thing I notice looking between the two sections are the social media buttons and the menu are slightly different. Media buttons have their icons a step higher in the cities page, and the therapist page has a blank line between the logo and the menu.
From a user perspective that can be a little jarring. The social media isn't much of an issue as the difference is minimal, but I certainly notice the difference in the menu.
0
 
LVL 42

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 250 total points
Comment Utility
You will always get redundancy in CSS files unless all your pages are exactly the same!! That's normal and I wouldn't worry about it. Obviously if the CSS is never used by anything in your site, then that should be removed.

You certainly don't need a reset stylesheet - that will just make things worse. The modern approach is to use a normalizer stylesheet instead, which you are already including in your CSS files.

Often the best way to split CSS files is by functionality rather than page, so have a general stylesheet for the majority of design, and then maybe another for forms and only include it on pages that have forms.

Sometimes you can go overboard though and end up with 20 stylesheets which is never good.
0
 

Author Closing Comment

by:arthurh88
Comment Utility
thank you
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The viewer will learn how to count occurrences of each item in an array.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now