Solved

How to remove unused CSS between multiple pages?

Posted on 2013-12-12
5
364 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
ID: 39715534
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
ID: 39715547
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
ID: 39715652
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 43

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 250 total points
ID: 39716335
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
ID: 39735474
thank you
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Send Mail Via SMTP Replacement/Rework 11 60
Poster Video HTML 5 Scale to fit video 3 37
How can i create a customized Login page based on Wordpress ? 8 27
html input type 3 21
I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

919 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

21 Experts available now in Live!

Get 1:1 Help Now