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.
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
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
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
