Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I am looking for a tool very similar to http://www.tothepc.com/archives/combine-merge-multiple-css-files/

However, given this example:

test1.css:

#admin {
    background: #c9d2dc;
    border-color: #ccc
}

test2.css:

#admin {
    background: #222;
    border-bottom: 1px solid #444;
    border-left: 1px solid #444;
    padding: 2px;
    position: fixed;
    right: 0px;
    top: 0px;
    width: 120px;
    z-index: 2
}

It will only allow you to select one or the other. I want to merge them, making it:

#admin {
    background: #c9d2dc;
    border-color: #ccc
    border-bottom: 1px solid #444;
    border-left: 1px solid #444;
    padding: 2px;
    position: fixed;
    right: 0px;
    top: 0px;
    width: 120px;
    z-index: 2
}
share|improve this question

2 Answers 2

The merger tool should give options for you when it spots the same id's/classes on different css files, but in this case it wouldn't allow you to merge them together. In example 1 you have the id "admin", with background set to #222. In example 2 the same id has a background designated as #c952dc. The merger can't put multiple attributes together, your css file wouldn't be valid. Each class/id, regardless of what file they exist on, should only have 1 instance of any particular attribute.

share|improve this answer
    
Correct, the tool gives you priority which file to use if you come up with matching attributes. Test1.css would have the priority –  ParoX Mar 2 '11 at 13:28

Edit: My original comment was that this is not an impossible task. but actually this is wrong: because a single element can be referred to in multiple ways, in the general case one can do no better than to concatenate the files. Consider...

<div id="one" class="two">Some text</div>

with CSS

#one {color: red; font-weight: 900;}
.two {color: blue;)

.two {font-weight: 500;}
#one {color: green}

This should end up with Green text, weight 500. If you put a merged .two first, you get Green 900, if you put the merged #one first, you get Blue 500. Neither is right, and because you don't know that the two selectors refer to the same element, you can't infer the correct answer.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.