merge css into one css file

Question

Over 2 years i have built my website where each JSP page has its own css defined. Now as part of performance optimization i would like to merge these CSS into one css file. How can i merge it without getting affected by same selector names?

For example i have multiple JSP pages define the following selector

table.myitemlisttable {
    width: 100%;
    margin: 10px auto;
    padding: 0px;
    border: 0px;
    border-collapse: collapse;
    background-color: rgba(0, 0, 0, .7);
}

where the name is same but there are differences in the attributes

Kelderic · Accepted Answer · 2014-03-12 03:18:57Z

4

One thing I do to avoid conflicts and keep the number of classes down is give each body tag an id. Then I can use those as limiting selectors to restrict the scope of my rules. Example, you have a Contact Us page, and a Products page. Products gets:

<body id="products">

And Contact Us gets

<body id="contactus">

Each page can have a table with the same class, and in your CSS, you'd just put the id in front of the rules.

#products table.myitemlisttable {
    width: 100%;
    margin: 10px auto;
    padding: 0px;
    border: 0px;
    border-collapse: collapse;
    background-color: rgba(0, 0, 0, .7);
}

#contactus table.myitemlisttable {
    width: 100%;
    margin: 10px auto;
    padding: 0px;
    border: 0px;
    border-collapse: collapse;
    background-color: rgba(255, 255, 255, .7);
}

You could even find things that are consistent on all pages, and pull them out to save lines.

table.myitemlisttable {
    width: 100%;
    margin: 10px auto;
    padding: 0px;
    border: 0px;
    border-collapse: collapse;
    background-color: rgba(0, 0, 0, .7);
}

#products table.myitemlisttable {
    background-color: rgba(0, 0, 0, .7);
}

#contactus table.myitemlisttable {
    background-color: rgba(255, 255, 255, .7);
}

answered Mar 12, 2014 at 3:18

Kelderic

6,7269 gold badges49 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user1241438 Over a year ago

Absolutely great idea

user1241438 Over a year ago

Is there a way we can do this for javascript functions?

Kelderic Over a year ago

With jQuery, you can add selectors like that. $('.myitemlisttable') to $(#products .myitemlisttable).

misterManSam · Accepted Answer · 2014-03-12 03:04:51Z

2

Change the class or id by appending a page name to the end. E.g. table.myitemlisttable_page_items.
Copy + Paste each snippet of CSS into a single CSS page.
Rename classes and ids as appropriate and remove any duplicate CSS where possible.

answered Mar 12, 2014 at 3:04

misterManSam

24.8k11 gold badges72 silver badges93 bronze badges

Comments

Nick Grealy · Accepted Answer · 2014-03-12 03:17:18Z

2

Hmm.. I like @misterManSam's answer, but I'd slightly vary it to reduce changing classes in lots of places.

I'd prepend a class or id to my css selector, then wrap (all) my html on each page...

CSS

.page1 table.myitemlisttable
.page2 table.myitemlisttable

HTML

<div class='page1'> ...existing page1... </div>

answered Mar 12, 2014 at 3:17

Nick Grealy

26.2k9 gold badges112 silver badges127 bronze badges

1 Comment

Nick Grealy Over a year ago

Ha, and fools seldom differ. :)

Collectives™ on Stack Overflow

merge css into one css file

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related