This question already has an answer here:
I know this is probably a trivial question, but I couldn't find anything on Google.
Is there any point in CSS where it's required to have a new line? For example, I have the following block of code:
#headertitle {
background: -o-linear-gradient(left, #3fd0e4 0%,#18709f 100%); /* Opera 11.10+ */
background: linear-gradient(to right, #3fd0e4 0%,#18709f 100%); /* W3C */
width:950px;
height:150px;
font-family:rw_SegoePrint_bold,'Segoe Print',OpenSansRegular,Verdana,sans-serif;
font-size:140px;
text-align:center;
position: absolute;
left: 50%;
top: 10px;
margin-left:-475px;
z-index:2;
}
I can simply remove the new lines to end up with #headertitle{background:-o-linear-gradient(left, #3fd0e4 0%,#18709f 100%);background: linear-gradient(to right, #3fd0e4 0%,#18709f 100%);width:950px;height:150px;font-family:rw_SegoePrint_bold,'Segoe Print',OpenSansRegular,Verdana,sans-serif;font-size:140px;text-align:center;position:absolute;left:50%;top:10px;margin-left:-475px;z-index:2;} and it still parses perfectly, as I would've expected. However, are there any instances in CSS coding that definitely require a new line to be present? Or am I okay to just replace " " with "" (using PHP)?
</div>
Either way is correct. The former is better for development purposes because it is readable. The latter is better for production purposes as it results in a smaller file size, especially if you remove all the unnecessary spaces.
You are completely right, you don't need comments or line breaks. As long as you use ; at the end of the property.
Please look into PHP Minify where you can have full CSS, JS and HTML with line breaks or however you want them to be readable. And than minify them with PHP Minify, this removes line breaks, comments, everything you don't need for the client! You can even combine files with groups if you want.
No, the newline is not needed.
Here is an article about reducing code size: 10 Tips for a Smaller CSS File
I know there are like 20 answers to this, but I wanted to add the way I format css.
body { background: green; }
ul { margin: 0 50px 0 0; }
ul li { list-style-type: circle; }
This minimizes newlines, but keeps the code readable. Plus I spend more time looking for selectors than I do for attributes.
Allow me to add one more suggestion to this discussion. Nowadays it is becoming more and more common to use a css precompiler. Personally I work with LESS, but there are other good ones like SASS.
The advantage is that you can write and update you code much faster, because you can use things like nesting, variables, merging files and even basic functions (called mixins in LESS).
When you are finished developing, you can compile your .less files to standard .css files. You can do this on the fly on the server, client side trough javascript, but I prefer to compile the files before I upload them to the server (better performance). There are many good compilers out there, and most of them offer the option to minify the css (and thus remove all whitespace, linebreaks and comments).
Personally I work with Codekit as my compiler (MAC only), which is well worth it's small license fee. It has tons of other great features like minifying and validating Javascript, optimizing images and even live css injections (no page refresh needed), which is great during development. And it continuously monitors your project and automatically compiles on change.
It may seem a bit challenging at first, but LESS is actually not that hard (very similar to standard css) and once you get used to it, you won't be able to live without. A real time saver!