CSS Coding Tips

This topic was published by and viewed 2491 times since "". The last page revision was "".

Viewing 1 post (of 1 total)
  • Author
    Posts

  • DevynCJohnson
    Keymaster
    • Topics - 437
    • @devyncjohnson

    Cascading Style Sheets (CSS) is a style sheet language that is used by most websites. CSS provides a way to declare the appearance of an HTML document and other XML documents. Along with HTML and JavaScript (and often times PHP), CSS is a major component of a website's code. On the Internet, many web designers and server admins try to find ways to increase a website's performance. The CSS portion of a website is one that developers should work on to gain performance improvements.

    The CSS code is usually in a plain-text file that uses the "*.css" extension. However, the CSS code may be embedded in the HTML code. Either way, the CSS code is data that must be downloaded by the client and interpreted. Obviously, more CSS data means more processing and more downloading, thus less fast performance. Web developers should ensure that there is as little code as possible and that the code works properly (i.e. no conflicting CSS settings and errors).

    Tools

    CSS Lint can be used online or in a command-line (if "csslint" is installed). CSS Lint analyzes CSS code and lists errors, warnings, performance issues, etc. The online and command-line editions are open-source and safe to use ( http://csslint.net/ ). I also recommend the website https://www.websiteplanet.com/webtools/jscssminifier/.

    The easiest and best way to increase performance is to use CSS Compressor ( http://csscompressor.com/ ). This is a free and safe website that reduces the size of (minifies) the CSS code. The user has some options that determine how much to compress the code and how to do so. For instance, unneeded backslashes and semicolons are removed as well as comments, most newlines, invalid properties, and more (depending on the chosen settings). DCJTech used CSS Compressor and the CSS was reduced by over 40%. Thanks to this tool and other methods, DCJTech has improved its performance.

    To validate the CSS to ensure that is works properly, try out the W3C's free CSS Validation Service. This tool is online at https://jigsaw.w3.org/css-validator/ or http://www.css-validator.org/ . There are many ways of giving the tool the CSS code. Once submitted, the website displays the errors and warnings. Fixing these errors and warnings can help to make the website fast and work across many web-browsers.

    Coding Techniques

    Besides online tools, there are many coding techniques that web designers can adopt.

    Color compression can also help to reduce the CSS code. Use the hexadecimal triplets instead of the six-digit sequence. For instance, the color black can be represented as "#000" (triplet) or "#000000". They each show the same color, but the triplet uses less data space. Many web safe colors can be compressed such as "#0033cc" which can be reduced to "#03c". If using a color that is not web safe, look for a color that is very similar that can be minified to a triplet.

    Shorthand code is shorter code that means the same as the regular code. For illustration, the to CSS snippets below for an image margin will perform the same task, but the shorthand is faster to type, download, and interpret.

    Regular

    img { margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 30px;
    margin-left: 40px;
    }

    Shorthand

    img{margin:10px 20px 30px 40px}

    Naming one margin value will apply that length to all four sides. This is better than typing "10px 10px 10px 10px".

    When writing any CSS code, do not be redundant or use unnecessary code. Also, try to keep a single CSS file that is "global" rather than have a separate CSS file for each page or object. When in doubt, apply the KISS Principle - "Keep It Simple, Stupid".

    Mentioned Online Tools

    Further Reading

Viewing 1 post (of 1 total)