Professional CSS3

Short forms of useful elements

In CSS code (and not only CSS), you wish to get the final effect more quickly each time you repeat a part of the code. So why don't you create short forms for some CSS declarations as well? Let's check what we can make shorter:

/* Text decoration */
=tdn
  text-decoration: none

=tdu
  text-decoration: underline


/* Text align */
=tac
  text-align: center

=tar
  text-align: right

=tal
  text-align: left


/* Text transform */
=ttu
  text-transform: uppercase

=ttl
  text-transform: lowercase


/* Display */
=di
  display: inline

=db
  display: block

=dib
  display: inline-block


/* Margin 0 auto */
=m0a
  margin: 0 auto

Now, each time you want to make some text uppercase, you are just using code:

.sampleClass
  +ttu

Here's the compiled CSS:

.sampleClass ...