CSS organization

Question:

Is there a standard for organizing CSS? For example:

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

Where

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

Which is the most suitable?

Answer:

There is no set rule for how CSS files are indented and/or formatted. Every programmer has their own style which makes things difficult when it comes to standardizing.

However, there is a consensus that they must be easily interpreted by the programmer, while they must 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 the sake of illustration, I'm going to use PHP code in order to serve the 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, in the way we most relate to reading them.

The language that is serving the website for the browser is responsible for optimizing the file and serving it as optimized 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;}

As we intend, no spaces, no tabs, no comments…

How to use it (HTML):

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

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

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

Benefits

  • CSS files are always readable and formatted as intended;
  • Reduced HTML markup as a single line gives the website all the CSS;
  • 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 zip and unzip our code.
Scroll to Top