/    Sign up×
Community /Pin to ProfileBookmark

how to best merge two huge CSS files ?

Hi Guys,

First post here.

I have a task that I need to complete which seems difficult and I wondered if anyone might know of a better method than what I can come up with.

I need to consolidate 2 very large CSS files (old and new) in to one file. I therefore need to search for any repeated styles and merge them in to one. My issue with this is that if the old css file has the style that the new css file has then I would obviously need to change the name of the style in the HTML which could have massive implications on the site that uses the style sheet.

I hope I’ve explained things properly and I’ll elaborate more if needed. I basically want a program that’s going to do it all for me but I doubt there is such a wondrous device….failing that it’s going to be a long a tedious task!

:rolleyes:

to post a comment
CSS

8 Comments(s)

Copy linkTweet thisAlerts:
@aliabbas_geniusJun 06.2008 — Can you tell me that where u r using these scc. in dot net nuke or in other?
Copy linkTweet thisAlerts:
@sollyauthorJun 06.2008 — Can you tell me that where u r using these scc. in dot net nuke or in other?[/QUOTE]

Slightly confusing question mate? I'm just viewing the CSS in Dreamweaver... I'm not using dot net nuke or anything like that.
Copy linkTweet thisAlerts:
@WebJoelJun 06.2008 — A 'sledge hammer approach' springs to mind: merely copy & paste one to append the other. Never mind that something is repeated or 'stated twice'. We'll deal with that next:

Now, find an [I]online CSS-optimizer[/I], and [I]copy & paste[/I] the combined single CSS file there, and run the optimizer. It will deftly 'optimize the combined', remove re-statings and redundancies, etc. And, your combined CSS file will likely be 25-75% SMALLER as a result!

Now, you [I]may encounter some problems[/I] with some element's styles being 'dropped' or 'altered' if two styles state twice, and one CSS rule takes precedance. But these would be easier to find what with a single CSS file, and reduced code, and affect the global change to correct this.

Recommendation: some CSS optimizers provide the option of "removing unnecessary whitespaces"... DO NOT DO THIS! You WANT your white-space intact for human readability-editability. Else, you get something like this:
html,body{foo:bar;value;foo:bar:value}body{foo:bar;value;foo:bar;value}wrapper,left{foo:bar;value;foo:bar;value}outer{foo:bar;value;foo:bar;value}inner{foo:bar;value;foo:bar;value}...etc etc etc...[/QUOTE] What you WANT, is this:
html, body {

foo:bar;value; foo:bar;value

}

body {

foo:bar;value; foo:bar;value

}

wrapper, left {

foo:bar;value; foo:bar;value

}

outer {

foo:bar;value; foo:bar;value

}

inner {

foo:bar;value; foo:bar;value

}[/QUOTE]
...etc etc etc... or something closely resembling this second example.. MUCH easier to read/edit. It is only when you are 100% completely, fully and unequivocably DONE with the CSS (and even then, -only if you want to, to save that additional few K?, would you option to 'remove unnecessary whitespace'.

And OF COURES(!!!), first make COPIES of your work BEFORE commiting these actions. SAVE both single files seperately, save the 'merged file' seperately, and [I]then[/I] create & TEST the merged-optimized file for suitability. -Once 'optimized', the CSS-optimizer will NOT revert to an earlier state and you will have LOST your original [I]copy & paste[/I] file...

I am fond of http://floele.flyspray.org/csstidy//css_optimiser.php

Google "CSS optimizer/optimiser". Many results appear.

In your case, elements that in the old & new that are referanced singly but repeated (like "wrapper" might be "container" in an older version), BOTH these Selectors will be 'taken' into the CSS, even if "container" is not needed and "wrapper" is used instead. So, there might be some minor tweaking of the HTML in the end, too..
Copy linkTweet thisAlerts:
@sollyauthorJun 06.2008 — Webjoel,

A nice reply, thanks.

Consolidating the two css files and then copying them in to an optimizer was exactly what I tried this morning. However, I made the mistake of removing all white space so ended up with something like the one in your example of how not to do things....

Anyway, I still have the CSS files so no major problems. I'm a little unsure as to how these optimizers work but I'll give it another go and let you know how I get on.

Much appreciated so far...
Copy linkTweet thisAlerts:
@ntiwari2Apr 06.2011 — @ WebJoel: Hi, I have a similar issue as Solly. The difference is I have 7 files to merge. I ran the optimizer on the link you provided and it shrunk the file by around 38% . Now, the options I chose there were as follows:

1) Compress colors

2) Compress font-weight

3) Remove unnecessary backslashes

4) Discard invalid properties CSS2.1(in the drop down)

The messages I got were :


***********************************************************

22

Optimised number: Changed "0px" to "0"

Optimised shorthand notation (margin): Changed "0 0 0 0" to "0"

40

Optimised number: Changed "0px" to "0"

41

Optimised number: Changed "0px" to "0"

48

Optimised number: Changed "0px" to "0"

49

Optimised number: Changed "0px" to "0"

57

Optimised number: Changed "0px" to "0"

58

Optimised number: Changed "0px" to "0"

59

Optimised number: Changed "0px" to "0"

Optimised shorthand notation (padding): Changed "0 0 0 0" to "0"

72

Optimised number: Changed "0px" to "0"

78

Optimised number: Changed "0px" to "0"

97

Optimised number: Changed "0px" to "0"

111

Removed invalid property: opacity

130

Optimised number: Changed "0px" to "0"

131

Optimised number: Changed "0px" to "0"

139

Optimised number: Changed "0px" to "0"

147

Optimised number: Changed "0px" to "0"

155

Optimised number: Changed "0px" to "0"

156

Optimised number: Changed "0px" to "0"

165

Optimised number: Changed "0px" to "0"

174

Optimised number: Changed "0px" to "0"

192

Optimised number: Changed "0px" to "0"

202

Optimised number: Changed "0px" to "0"

212

Optimised number: Changed "0px" to "0"

222

Optimised number: Changed "0px" to "0"

224

Optimised number: Changed "0px" to "0"

270

Optimised number: Changed "0px" to "0"

286

Optimised number: Changed "0px" to "0"

295

Optimised color: Changed "#EEEEEE" to "#EEE"

306

Optimised color: Changed "#006633" to "#063"

308

Optimised color: Changed "black" to "#000"

430

Optimised color: Changed "#006633" to "#063"

431

Optimised font-weight: Changed "bold" to "700"

449

Optimised font-weight: Changed "bold" to "700"

457

Optimised font-weight: Changed "bold" to "700"

467

Optimised font-weight: Changed "bold" to "700"

478

Optimised font-weight: Changed "normal" to "400"

498

Removed unnecessary backslash

500

Removed invalid property: filter

504

Removed unnecessary backslash

506

Removed invalid property: filter

524

Optimised color: Changed "#000000" to "#000"

545

Optimised number: Changed "0%" to "0"

595

Optimised font-weight: Changed "bold" to "700"

597

Optimised shorthand notation (padding): Changed "0 0 10px 0" to "0 0 10px"

603

Optimised shorthand notation (padding): Changed "0 0 10px 0" to "0 0 10px"

621

Removed invalid property: filter

622

Removed invalid property: -moz-opacity

623

Removed invalid property: opacity

658

Optimised number: Changed "0px" to "0"

669

Optimised number: Changed "0px" to "0"

686

Optimised shorthand notation (padding): Changed "5px 10px 5px 10px" to "5px 10px"

689

Optimised color: Changed "#CCCCCC" to "#CCC"

690

Optimised number: Changed "0.7em" to ".7em"

699

Optimised font-weight: Changed "bold" to "700"

723

Optimised color: Changed "#333333" to "#333"

724

Optimised color: Changed "#333333" to "#333"

736

Optimised color: Changed "#000000" to "#000"

741

Optimised color: Changed "black" to "#000"

753

Optimised color: Changed "#006633" to "#063"

759

Optimised number: Changed "0px" to "0"

Optimised shorthand notation (padding): Changed "0 0" to "0"

761

Optimised color: Changed "#006633" to "#063"

765

Optimised color: Changed "#006633" to "#063"

769

Optimised color: Changed "#006633" to "#063"

774

Optimised font-weight: Changed "bold" to "700"

779

Optimised color: Changed "#006633" to "#063"

786

Optimised number: Changed "0px" to "0"

793

Optimised number: Changed "0px" to "0"

796

Optimised number: Changed "0px" to "0"

798

Optimised font-weight: Changed "bold" to "700"

809

Optimised number: Changed "0px" to "0"

811

Optimised number: Changed "0px" to "0"

812

Optimised number: Changed "0px" to "0"

837

Optimised number: Changed "1.0em" to "1em"

852

Optimised color: Changed "#FFFFFF" to "#FFF"

855

Optimised number: Changed "0px" to "0"

861

Optimised number: Changed "0px" to "0"

875

Optimised color: Changed "#FFFFFF" to "#FFF"

876

Optimised color: Changed "#000000" to "#000"

887

Optimised color: Changed "#000000" to "#000"

892

Optimised color: Changed "#000000" to "#000"

907

Optimised color: Changed "#FFFFFF" to "#FFF"

915

Optimised number: Changed "0px" to "0"

920

Optimised number: Changed "0px" to "0"

921

Optimised number: Changed "0px" to "0"

929

Optimised color: Changed "#FFFFFF" to "#FFF"

930

Optimised color: Changed "#FFFFFF" to "#FFF"

941

Optimised color: Changed "#000000" to "#000"

946

Optimised color: Changed "#000000" to "#000"

957

Optimised color: Changed "#FFFFFF" to "#FFF"

965

Optimised number: Changed "0px" to "0"

968

Optimised number: Changed "0px" to "0"

970

Optimised number: Changed "0px" to "0"

979

Optimised color: Changed "#FFFFFF" to "#FFF"

980

Optimised color: Changed "#FFFFFF" to "#FFF"

991

Optimised color: Changed "#000000" to "#000"

996

Optimised color: Changed "#000000" to "#000"

1006

Optimised color: Changed "#FFFFFF" to "#FFF"

1014

Optimised number: Changed "0px" to "0"

1017

Optimised number: Changed "0px" to "0"

1019

Optimised number: Changed "0px" to "0"

1028

Optimised color: Changed "#FFFFFF" to "#FFF"

1029

Optimised color: Changed "#FFFFFF" to "#FFF"

1040

Optimised color: Changed "#000000" to "#000"

1045

Optimised color: Changed "#000000" to "#000"

1056

Optimised color: Changed "#FFFFFF" to "#FFF"

1064

Optimised number: Changed "0px" to "0"

1067

Optimised number: Changed "0px" to "0"

1069

Optimised number: Changed "0px" to "0"

1078

Optimised color: Changed "#FFFFFF" to "#FFF"

1079

Optimised color: Changed "#FFFFFF" to "#FFF"

1090

Optimised color: Changed "#000000" to "#000"

1095

Optimised color: Changed "#000000" to "#000"

1105

Optimised color: Changed "#FFFFFF" to "#FFF"

1113

Optimised number: Changed "0px" to "0"

1116

Optimised number: Changed "0px" to "0"

1118

Optimised number: Changed "0px" to "0"

1127

Optimised color: Changed "#FFFFFF" to "#FFF"

1128

Optimised color: Changed "#FFFFFF" to "#FFF"

1139

Optimised color: Changed "#000000" to "#000"

1144

Optimised color: Changed "#000000" to "#000"

1155

Optimised color: Changed "#FFFFFF" to "#FFF"

1163

Optimised number: Changed "0px" to "0"

1166

Optimised number: Changed "0px" to "0"

1168

Optimised number: Changed "0px" to "0"

1177

Optimised color: Changed "#FFFFFF" to "#FFF"

1178

Optimised color: Changed "#FFFFFF" to "#FFF"

1189

Optimised color: Changed "#000000" to "#000"

1194

Optimised color: Changed "#000000" to "#000"

1205

Optimised color: Changed "#FFFFFF" to "#FFF"

1213

Optimised number: Changed "0px" to "0"

1216

Optimised number: Changed "0px" to "0"

1218

Optimised number: Changed "0px" to "0"

1227

Optimised color: Changed "#FFFFFF" to "#FFF"

1228

Optimised color: Changed "#FFFFFF" to "#FFF"

1239

Optimised color: Changed "#000000" to "#000"

1244

Optimised color: Changed "#000000" to "#000"

1255

Optimised color: Changed "#FFFFFF" to "#FFF"

1263

Optimised number: Changed "0px" to "0"

1266

Optimised number: Changed "0px" to "0"

1268

Optimised number: Changed "0px" to "0"

1277

Optimised color: Changed "#FFFFFF" to "#FFF"

1278

Optimised color: Changed "#FFFFFF" to "#FFF"

1289

Optimised color: Changed "#000000" to "#000"

1294

Optimised color: Changed "#000000" to "#000"

1306

Optimised color: Changed "#FFFFFF" to "#FFF"

1314

Optimised number: Changed "0px" to "0"

1317

Optimised number: Changed "0px" to "0"

1319

Optimised number: Changed "0px" to "0"

1328

Optimised color: Changed "#FFFFFF" to "#FFF"

1329

Optimised color: Changed "#FFFFFF" to "#FFF"

1340

Optimised color: Changed "#000000" to "#000"

1345

Optimised color: Changed "#000000" to "#000"

1355

Optimised color: Changed "#FFFFFF" to "#FFF"

1363

Optimised number: Changed "0px" to "0"

1366

Optimised number: Changed "0px" to "0"

1368

Optimised number: Changed "0px" to "0"

1377

Optimised color: Changed "#FFFFFF" to "#FFF"

1378

Optimised color: Changed "#FFFFFF" to "#FFF"

1390

Optimised color: Changed "#000000" to "#000"

1395

Optimised color: Changed "#000000" to "#000"

1406

Optimised color: Changed "#FFFFFF" to "#FFF"

1414

Optimised number: Changed "0px" to "0"

1417

Optimised number: Changed "0px" to "0"

1419

Optimised number: Changed "0px" to "0"

1428

Optimised color: Changed "#FFFFFF" to "#FFF"

1429

Optimised color: Changed "#FFFFFF" to "#FFF"

1434

Optimised number: Changed "0px" to "0"

1440

Optimised color: Changed "#000000" to "#000"

1445

Optimised color: Changed "#000000" to "#000"

*********************************************************

My question is whether I chose the correct options in the optimizer..

Also , I still need to eliminate some unnecessary styles in the optimized file...Basically keeping those styles which are required and deleting the styles which are not required...So, should I run the optimizer first or after eliminating the unnecessary styles?
Copy linkTweet thisAlerts:
@ntiwari2Apr 06.2011 — Webjoel,

A nice reply, thanks.

Consolidating the two css files and then copying them in to an optimizer was exactly what I tried this morning. However, I made the mistake of removing all white space so ended up with something like the one in your example of how not to do things....

Anyway, I still have the CSS files so no major problems. I'm a little unsure as to how these optimizers work but I'll give it another go and let you know how I get on.

Much appreciated so far...[/QUOTE]



I have a similar situation as yours. I have 7 css files which i need to consolidate. I merged all the files and ran the css optimizer on: http://floele.flyspray.org/csstidy//css_optimiser.php .... It reduced the file size by 38 % . The other thing I need to take care of is that I need to eliminate redundant styles in the file. Now, how should I go about it?
Copy linkTweet thisAlerts:
@PhoubersApr 12.2011 — CSS Optimizer

Run all the code through this and your identical selectors will be merged into one.
Copy linkTweet thisAlerts:
@usaphpApr 28.2011 — I just found a good online tool that will merge and gzip compress your css files and also does the same thing with javascript, you can either enter your sites url or simply upload desired files. zbugs.com
×

Success!

Help @solly spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...