• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
Locked
0

Shorthand CSS

LEGEND ,
Aug 31, 2013 Aug 31, 2013

Copy link to clipboard

Copied

Lots of people are getting stuck in with CSS but many there are many cases of long CSS methods being used. This guide helps you step forward into improving your CSS by writing cleaner and shorter CSS to help improve the perfomance of your site and produce cleaner more effecient code.

There are a number of principles and steps you should look to consider during and after you write your CSS. Optimisation is something you should look to do with your scripting, html and elements such as your CSS, not only do you have that improved perfmance but a cleaner well organised CSS file is easier to manage and use and come back to. You will find that knowing these skills will help develop your knowledge and thus being familiar with this concepts will allow you write optimized CSS code and make you a better all-around web designer who will want to learn and strive for more.


Colours

As you may be aware a colour in CSS can either be a HEX value or an RGB colour value respresentation.
The hex colour value is made up of 6 numbers and character combination while the RGB value is the true red green blue set of 3 sets of 3 digit numbers to respresent the colour.

As a note using colours - Programing converts down to machine code. Everything goes down to 1's and 0's at the end of the day. Hex is a lower level form of colour and CSS will first step colours into a Hex version if they do not exist. So using Hex Colours is more a more effecient render.

Lots of designers like to use RGB based on their designs but Hex is more effecient.

When to use RGB?

RGB is good to define the right way to do opacity using alpha transparency:

rgba(255,255,255,0.5); Will render the colour at an opacity of 50%.

Shorthand Colours

There are many cases where you have a set of colours that are repeated, either all the same letter or number or a combination series. When a colour consists of three pairs of hexadecimal digits, you can omit one digit from each pair:

#ffffff               = #fff

#000000         = #000

#333333         = #333

#336699         = #369

This is a far more effecient means of writing your colour and a lot quicker to do as well saving you time.

Backgrounds

There are a lot of background properties, some I wont mention here but background has evolved over the years and extented greatly. With CSS3 for example there are gadients and multiple backgrounds you can set and use. But lets keep to some of the basic concepts for now and as you improve you can explore the combinations.

Here are some examples of Background properties you may be writing as such right now:

background-color: #00000;

background-image: url("images/bg.gif");

background-repeat: no-repeat;

background-position: top right;

There are two improvements we could do right now to make this:

background-color: #000;

background-image: url(images/bg.gif);

background-repeat: no-repeat;

background-position: top right;

You know already how to shorten your colours and you will see no speach marks in the url source method now. Every browser can render your background image without this, technically speach marks are the more valid CSS but I learnt to remove the clutter from my CSS, if it really is not needed and causes no issues, why use it?

You now can take this to the ultimate. You may or may not know you can combine all of this into one background property and you can now form these into one line:

background:#000 url(images/bg.gif) no-repeat top left;

Look how clean that is. You can take it further and use numerical positioning values so top left can become 0 0.

http://jsfiddle.net/MYshr/1/

You can also combine background-size and background-attachement as shorthands as well.

Margin & Padding

Margin and padding is an interesting one. There is some use in doing these aspects seperatly, especially overiding but a lot of people do not combine them together.

You have these elements for both padding and margin

margin-top

margin-left

margin-right

margin-bottom

AND

Padding-top

padding-left

padding-right

padding-bottom

You can combine these elements into the following single line combinations

margin:5px 4px 3px 2px 1px;

&

padding:5px 4px 3px 2px 1px;

The order of the elements is an easy one to remember...

Margin:TOP RIGHT BOTTOM LEFT;

So what if you have the following?

margin:5px 5px 5px 5px;

Do you right it like that?

No, it can even be shorter:

margin:5px;

If you have equal top and bottom margin and your left and right are equal you can right:

margin:10px 5px;

Where the 10px is top and bottom and the 5px is left and right.

The same syntax is used for padding.

Border

Border is a good one, it can follow the same principles as margin and padding and also has colour and type.

An example of long handed border coded:

border-left-color:#000000;

border-left-width:1px;

border-left-style:solid;

And you could do that for every side. If they are all the same you can combine the elements into one - border.

border-color:#000;

border-width:10xp;

border-style:solid;

That is good, thats shorter but we can again do a single line version of this code to form:

border:1px solid #000;

We just gone from a possible 12 lines of code down to 3 lines of code and then 1. A LOT OF effeciency!

For each element you can also write shortand.

If you follow the same principle as margin and padding where you had the phrase "TOP RIGHT BOTTOM LEFT" you can write the border width's like...

border-width:0 1px 1px 0;

And you can do the same for border-color and border-style.

EM

This is a quick little tip. EM unlike % and px does not need the EM when you use it.

WHAT?

Yeah, thats right, lets look at a font example.

font-size:14px;

font-size:3em;

font-size:20%;

BUT you can write the em like this:

font-size:3;

The system browser knows to use em, how cool is that!

Fonts

Fonts is an interesting one and comes with a bit of a warning. The full shorthand does not work correctly in the older browsers.

Here is an example Font written in css:

font-style:italic;
font-variant:small-caps;
font-weight:bold;

font-size:1em;

line-height:140%;

font-family:"Lucida Grande",sans-serif;

Again though we can combine all this into one line...

font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

You should be able to see which element is which, this is quite handy. I know what you are thinking though, I just showed you about EM's, You are right you can write it shorter:

font:italic small-caps bold 1/140% "Lucida Grande",sans-serif;

This effeciency you should be able to start to see you are really starting to create shorthand clean CSS! These concepts are vital for when you start getting into CSS3 with transitions, gradients and keyframes and much much more.

There will be a further guide on an example of way of writing your CSS to offer up CSS files with less lines of code. You can take your stylesheets from two thousand lines of code into the hundreads and still be readable.

TOPICS
Documentation

Views

2.8K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines