Magento 1.9: Merge CSS breaking frontend UI

Question

Recently I tried enabling CSS merge inside System->Configuration->Developer

But this is breaking complete UI in front end. ** It seems like CSS os having issues & I have to make CSS error free**.

Can anyone list out what points have to check in CSS to avoid such issues.

• Shyam Krishna Sreekumar: straight away we can tell you what is the issue. first confirm its caused by css, not the js merging. secondly, move the site to local and remove the css one by one and then merge and seein which part its getting stucked. But i didnt get how the site breaks on merging css. The possiblity is more for js merging.
• Akhil Gupta: I enabled CSS merge only JS merge i am keeping disabled. Seems it's caused by CSS only.

Answer 1

Copy the content of your CSS and copy it into the W3C validator: https://jigsaw.w3.org/css-validator/

It will list the errors and once you've fixed them, merge CSS will come back normal

• Akhil Gupta: Thanks..!! Found some 200+ errors , 500+ warnings. will forward to UI developer to fix all :P
• Akhil Gupta: Any JS validator also there?
• Raphael at Digital Pianism: @AkhilGupta I don't think there is some as there is a lot of JS frameworks and their syntax is different.

Answer 2

when you are doing css merged then please take care of this things.

Your Css file does not has syntax error.

If your css has syntax error then It will not effect css after that error.

for example you have miss ; or } or you have put an extra } these are the cause the css error and your css file break and after that error rest of the css code will not execute

Answer 3

Check if any of your combined CSS files have used "import" method. This can cause design breaking as imported CSS will not work when you combine them. For example:

@import url("style.css")

Instead of using import, you can create one separate CSS file and write down all the imported CSS files code in that separate CSS file.

Or, you can include the file using "link" HTML tag, like this:

<link rel="style.css" href="style.css" type="text/css">

In Magento, you can include CSS files from app/design/frontend/YOUR_PACKAGE/YOUR_THEME/layout/local.xml