Organization of CSS

Question

Is there a pattern for organizing CSS? For example:

.teste{font-family:"arial";font-size:18px;color:white}

or

.teste{
font-family:"arial";
font-size:18px;
color:white
}

Which is the most appropriate?

Answer 1

There is no established rule for how CSS files are indented and/or formatted. Each programmer has their own 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 at the same time 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 will use PHP code to serve CSS to 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 most to read them.

The language that is serving the website to the browser is who is in charge of optimizing the file and serving it as optimally as possible.

With the PHP code shown above 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;}

Just the way we want it, no spaces, no tabs, no comments...

How to use (HTML):

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

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

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

Perks

• CSS files always readable and formatted as we want;
• Reduced HTML markup as a single line provides the entire CSS to the website;
• Optimized and compressed CSS to save as much space as possible;
• Easier system to maintain in the future without having to resort to third party tools to compress and unzip our code.

Answer 2

No, there’s no pattern.

What should be considered is: for example, at the time of development, many authors prefer to leave everything separate to facilitate the location of 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 subjects, as in the example below (position, appearance, etc):

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

If a person has an awareness of what they are doing, nothing prevents them from leaving everything in one line, or using mixed:

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

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

that is, it is matter of personal taste, or standard for teamwork, or company policy, if that is the case.

On the other hand, there are CSS processors that compress the code, which can translate into a huge saving of money, given the smaller bandwidth you need to use while avoiding unnecessary transport of spaces, line breaks and tabulations. 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 is worth remembering that many times pays to test if minification of CSS is really advantageous, because in many occasions just configure the server (be it Apache, NGINX, IIS, etc.) to use GZIP, which already reduces the code immensely, often worth more than extra processing over CSS (unless you cache the result locally).

Answer 3

I agree with George B., in my view, it is a matter of preference. I think it makes a difference when the amount of CSS customized is large and is in the same file as the page code (which I don’t think is very recommended, but a separate file), as it can generate a greater difficulty to locate/browse the content as a whole.

Answer 4

There is no pattern. The two forms are a matter of taste. According to my perception the second is preferred by most because it looks cleaner, more readable. Some think the first one makes the code shorter. But all this is questionable, it’s a matter of taste.

All right. That’s it.

Answer 5

Actually when I finish developing the CSS, i do a file compression CSS for website or system optimization purposes or whatever it is. For such use this website, Passing an excellent tool for compression of style sheets.

Answer 6

In fact, contrary to what the other replies reported, there is yes a standard, set by Google, that you find on Google Style Guide.

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

Selector and Declaration Separation

Separate selectors and declarations by new Ines.

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 to say, is yes recommended to separate selectors and declarations by line break.

Answer 7

When I program in CSS I always use a different syntax because I have 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 fault for example change the color.

Answer 8

Use the second way while producing the code, on behalf of Indentation becomes easier to understand, when finishing the production of the same, use a "CSS Minifier" that will make the code more or less equal to the first way, making the file smaller.

Answer 9

I like to organize my css with pre-processors, I use the SASS http://sass-lang.com, I also use a methodology called SMACSS https://smacss.com/ where it teaches how to make a modular css architecture.

Answer 10

The second option is the "most readable", but both work the same way. It is only identation (the second option is identada and the first is not).