FaeDubh

I love Cascading Style Sheets, but even more so it’s shorthand properties. I won’t address all of them here but I hope to interest you enough to look into them later for an easier styling experience.

I know that every designer has his/her own way of coding and styling. It’s almost like a fingerprint, unique to its owner. But I also think that as we gain experience, we improve and advance in our skills. When I first started styling, I did the whole line-by-line unnecessary repeats of CSS that cluttered. With time, I discovered and began to use CSS shorthand and comment tags to organize and “tidy” style sheets. Today, that tendency has become a pet peeve.

CSS shorthand allows you to combine and specify different properties to a certain element in the same declaration or line. It validates too, in case you’re wondering.

Consider this short example:

In your CSS, a common way to approach padding or margin would be:

padding-top: 15px;
padding-right: 7px;
padding-bottom: 3px;
padding-left: 5px;

With CSS shorthand you can combine them all together, like this:

padding: 15px 7px 3px 5px;

Positioning is important to know. An easy way to remember them (thanks to Skye) is to work your way clockwise. It’s padding: top right bottom left.

And it doesn’t stop there; it can be simplified further if you have the same values for all, top and bottom, or left and right, like below:

padding: 10px 10px 10px 10px;     - - - >   padding: 10px;
padding: 10px 5px 10px 5px;          - - - >   padding: 10px 5px;
padding: 0 8px 0 8px;                        - - - >   padding: 0 8px;

Wasn’t that simple? Now, I’m not saying that not using CSS shorthand is wrong, it’s just easier. A clean and tidy style sheet is eye candy, but it’s also a preference. However, if you’re looking for a list of reasons why, here are some:

1. It’s quick and efficient, minimizing redundancy while you code or style.
2. It helps lessen the overall time it takes to load an external style sheet by keeping it short and simple.
3. It’s easier to edit or find something when it’s organized.
4. Visitors or curious web developers viewing your style sheet won’t need to decipher through unnecessarily to find something that intrigued them.
5. It’s neater.

If you’re interested and want to learn more about where shorthand can be applied, you can take a look at any one of the two demonstrations below:

• Useful CSS Shorthand Properties by Trenton Moss.
• Efficient CSS with Shorthand Properties by Roger Johansson.

Or simply visit the more-than-able and much loved W3Schools.