There is no established rule for how CSS files are indented and / or formatted. Every programmer has his style which makes things difficult when we talk about standardizing.

However, there is a consensus that they should be easily interpreted by the programmer, while they should be optimized for the best performance of the web page where they are used.

The best of both worlds

The coexistence of these two ideals can be achieved as follows:

CSS

CSS file properly indented and commented:

/* Lines
 * ------------------------------ */
.line-service{
    background-color:#A9A9A9;
    height:1px;
    width:240px;
    position:absolute;
    bottom:60px;
}
.diagonal-left{
    left:-214px;
    transform:rotate(142deg);
    -moz-transform:rotate(142deg);
    -webkit-transform:rotate(142deg);
    -o-transform:rotate(142deg);
}
.diagonal-right{
    right:-214px;
    transform:rotate(38deg);
    -moz-transform:rotate(38deg);
    -webkit-transform:rotate(38deg);
    -o-transform:rotate(38deg);
}
.vertical-center{
    height:168px;
    width:1px;
    left:50%;
    bottom:-13px;
}

PHP

For example, I'm going to use PHP code to serve CSS for a website:

<?php
header('Content-type: text/css');

// define o buffer para a função "compress"
ob_start("compress");

function compress($buffer) {

    /* remove comentários */
    $buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);

    /* remove tabs, spaces, newlines, etc. */
    $buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);

    return $buffer;
}

$cssFiles = realpath(dirname(__FILE__)).'/*.css';

foreach(glob($cssFiles) as $file) {

    include($file);
}

ob_end_flush();
?>

The idea is to have the files "normally", that is, the way we relate to read them.

The language that serves the website for the browser is who is in charge of optimizing the file and serve the same optimized as possible.

With the above PHP code displayed the file is served as follows:

.line-service{background-color:#A9A9A9;height:1px;width:240px;position:absolute;bottom:60px;}.diagonal-left{left:-214px;transform:rotate(142deg);-moz-transform:rotate(142deg);-webkit-transform:rotate(142deg);-o-transform:rotate(142deg);}.diagonal-right{right:-214px;transform:rotate(38deg);-moz-transform:rotate(38deg);-webkit-transform:rotate(38deg);-o-transform:rotate(38deg);}.vertical-center{height:168px;width:1px;left:50%;bottom:-13px;}

As we intended, no spaces, no tabs, no comments ...

How to use (HTML):

For the practical example, the css.php file that contains the PHP code above is inside the folder where all the CSS files we want to serve the website are.

In HTML, instead of calling each of the CSS files, we call only the PHP file, being responsible for reading all CSSs and sending them properly optimized:

<link href="http://www.meusite.com/caminho/para/css.php" rel="stylesheet" type="text/css">

Advantages

• CSS files always readable and formatted as intended;
• Reduced HTML markup because a single line provides the website with all CSS;
• Optimized and compressed CSS to save as much space as possible;
• Easier system to maintain in the future without having to use third-party tools to compress and decompress our code.

No, there is no default.

What should be considered is: for example, at the time of development, many authors prefer to leave everything separate to facilitate locating the parts of interest for maintenance, as in the example below:

div {
   position: absolute;
   top: 0;
   right: 0;
   font-family: arial;
   color: red;
   line-spacing: 20px;
}

Others prefer to separate lines by subject, as in the example below (position, appearance, etc.):

div {
   position: absolute; top: 0; right: 0;
   font-family: arial; color: red;
   line-spacing: 20px;
}

If the person has an awareness of what he is doing, nothing prevents him from leaving everything in one line, or use mixed:

body,html { margin:0; padding:0 }

div {
   position: absolute; top: 0; right: 0;
   font-family: arial; color: red; line-spacing: 20px;
}

That is, personal taste , or standard for teamwork , or company policy , this is the case .

On the other hand, there are CSS processors that compress the code, which can translate into a huge money saving, given the smallest bandwidth you need to avoid transporting unnecessary spaces, line breaks and tabs. It may seem silly when the site serves half a dozen pages a day, but imagine the CSS of large sites such as search engines and social networks.

It's worth remembering that it often makes up for testing if CSS minification is really advantageous, since on many occasions you just have to configure the server (be it Apache, NGINX, IIS, etc.) to use GZIP , which already reduces the code immensely, often worth more than extra rendering over CSS (unless you do some local caching of the result).

I agree with Jorge B., as I see it, it's a matter of preference. I think it makes a difference when the amount of CSS custom is large and is in the same file as the page code (which I do not think is highly recommended, but rather a separate file) difficulty finding / navigating the content as a whole.

There is no pattern. The two forms are a matter of taste. According to my perception the second is preferred by the majority because it seems cleaner, more readable. Some think the former leaves the code shorter. But all this is questionable, it's a matter of taste.

Ready. That's all.

Actually when I finish developing CSS , I compose the CSS file for optimization purposes of the site or system or whatever. For this use this site , in passing an excellent tool for style sheet compression.

In fact, contrary to what the other answers reported, there is a default, set by Google, that you find in Google Style Guide .

There you will find, among other rules, the following:

  

Selector and Declaration Separation

     

Separate selectors and declarations by new lines.

     

Always start a new line for each selector and declaration.

/* Not recommended */
a:focus, a:active {
  position: relative; top: 1px;
}
/* Recommended */
h1,
h2,
h3 {
  font-weight: normal;
  line-height: 1.2;
}

That is, yes is recommended to separate selectors and declarations by line break.

I like to organize my css with preprocessors, I use the SASS link , I also use a methodology called SMACSS link where you can learn how to build a modular css architecture.

Use the second way while producing the code, because of the Indent it becomes easier to understand, when finished producing it, use a "CSS Minifier" strong> that will make the code more or less the same as the first form, making the file smaller.

When I program in CSS, I always use a different syntax because of better knowledge of the code and easy access.

.menu
{
   color: #FFF;
   text-align: left;
}

It is easier to access the code if there is a failure, for example to change the color.

The second option is "readable", but both work the same way. It is just an indentation (the second option is indented and the first one is not).