The Issue
Managing a large website with a deep CSS folder structure can present challenges when it comes to relative URLs for background images. Minifying CSS files before deployment can cause issues with these relative URLs due to the flattening of the folder structure. As a developer, how do you handle this discrepancy between development and production environments?
An Illustration
Consider this folder setup:
image/
article/
brushStroke.jpg
style/
module/
button.css
page/
article/
introToPainting.css
minified/
style20130522.css
During development, a CSS rule in introToPainting.css might look like this:
#step1 {
background-image: url(../../../image/article/brushStroke.jpg);
}
When you minify the files into style20130522.css for production release, the path to brushStroke.jpg may become incorrect due to differences in folder depth.
Example Image 1
Example Image 2