Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A list of teeny-tiny optimizations you know of that you can do safely in CSS

Things you can safely do:

Unary terms with 0 measurements:

margin-left: 0em;                      -> margin-left:0;
margin-left: 0ex;                      -> margin-left:0;
margin-left: 0cm;                      -> margin-left:0;
margin-left: 0mm;                      -> margin-left:0;
margin-left: 0pt;                      -> margin-left:0;
margin-left: 0pc;                      -> margin-left:0;
margin-left: 0px;                      -> margin-left:0;
margin-left: 0%;                       -> margin-left:0;

Same for angles - http://www.w3.org/TR/CSS21/aural.html#angles

azimuth: 0deg;                         -> azimuth:0;
azimuth: 0rad;                         -> azimuth:0;
azimuth: 0grad;                        -> azimuth:0;

And time - http://www.w3.org/TR/CSS21/aural.html#times

transition: all 0s;                    -> transition:all 0; 
transition: all 0ms;                   -> transition:all 0; 

And lastly frequencies - http://www.w3.org/TR/CSS21/aural.html#frequencies

pitch: 0hz;                            -> pitch:0;
pitch: 0khz;                           -> pitch:0;

Collapsing multiple redundant unary terms:

margin: 0px 10px 0px 10px;             -> margin:0 10px;
margin: 5px 10px 2px 10px;             -> margin:5px 10px 2px;
margin: 10px 10px 10px 10px;           -> margin:10px;
margin: 10px 10px 10px;                -> margin:10px;
margin: 10px 10px;                     -> margin:10px;

Collapseable long-hand properties (if all sub-rules are present):

margin-top: 5px;
margin-right: 6px;
margin-bottom: 7px;
margin-left: 8px;                      -> margin:5px 6px 7px 8px;

margin-top: 5px;
margin-right: 6px;
margin-bottom: 5px;
margin-left: 6px;                      -> margin:5px 6px;

margin-top: 5px;
margin-right: 6px;
margin-bottom: 10px;
margin-left: 6px;                      -> margin:5px 6px 10px;

Comments:

/* I'm very useful while developing */ -> (empty)

One-word string quotes:

font-family: "Verdana", "Arial", "sans-serif"; 
                                       -> font-family:verdana,arial,sans-serif;

Other shorthand properties:

filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);

                                       -> filter:alpha(opacity=50);

Colors:

All RGB values

rgb(255,255,255)                       -> #ffffff

Hex colors in which RR GG BB are the same:

#aabbcc                                -> #abc

CSS 2.1 colors:

#800000                                -> maroon
#f00                                   -> red
#ffa500                                -> orange
yellow                                 -> #ff0
#808000                                -> olive
#800080                                -> purple
fuchsia                                -> #f0f
white                                  -> #fff
#008000                                -> green
#000080                                -> navy
#008080                                -> teal
black                                  -> #000
#c0c0c0                                -> silver
#808080                                -> gray

CSS 3 extended colors:

aliceblue                              -> #f0f8ff
antiquewhite                           -> #faebd7
aquamarine                             -> #7fffd4
#f0ffff                                -> azure
#f5f5dc                                -> beige
#ffe4c4                                -> bisque
blanchedalmond                         -> #ffebcd
blueviolet                             -> #8a2be2
#a52a2a                                -> brown
burlywood                              -> #deb887
cadetblue                              -> #5f9ea0
chartreuse                             -> #7fff00
chocolate                              -> #d2691e
#ff7f50                                -> coral
cornflowerblue                         -> #6495ed
cornsilk                               -> #fff8dc
darkblue                               -> #00008b
darkcyan                               -> #008b8b
darkgoldenrod                          -> #b8860b
darkgray                               -> #a9a9a9
darkgreen                              -> #006400
darkgrey                               -> #a9a9a9
darkkhaki                              -> #bdb76b
darkmagenta                            -> #8b008b
darkolivegreen                         -> #556b2f
darkorange                             -> #ff8c00
darkorchid                             -> #9932cc
darksalmon                             -> #e9967a
darkseagreen                           -> #8fbc8f
darkslateblue                          -> #483d8b
darkslategray                          -> #2f4f4f
darkslategrey                          -> #2f4f4f
darkturquoise                          -> #00ced1
darkviolet                             -> #9400d3
deeppink                               -> #ff1493
deepskyblue                            -> #00bfff
dodgerblue                             -> #1e90ff
firebrick                              -> #b22222
floralwhite                            -> #fffaf0
forestgreen                            -> #228b22
gainsboro                              -> #dcdcdc
ghostwhite                             -> #f8f8ff
#ffd700                                -> gold
goldenrod                              -> #daa520
greenyellow                            -> #adff2f
honeydew                               -> #f0fff0
indianred                              -> #cd5c5c
#4b0082                                -> indigo
#fffff0                                -> ivory
#f0e68c                                -> khaki
lavender                               -> #e6e6fa
lavenderblush                          -> #fff0f5
lawngreen                              -> #7cfc00
lemonchiffon                           -> #fffacd
lightblue                              -> #add8e6
lightcoral                             -> #f08080
lightcyan                              -> #e0ffff
lightgoldenrodyellow                   -> #fafad2
lightgray                              -> #d3d3d3
lightgreen                             -> #90ee90
lightgrey                              -> #d3d3d3
lightpink                              -> #ffb6c1
lightsalmon                            -> #ffa07a
lightseagreen                          -> #20b2aa
lightskyblue                           -> #87cefa
lightslategray                         -> #789
lightslategrey                         -> #789
lightsteelblue                         -> #b0c4de
lightyellow                            -> #ffffe0
limegreen                              -> #32cd32
#faf0e6                                -> linen
magenta                                -> #f0f
mediumaquamarine                       -> #66cdaa
mediumblue                             -> #0000cd
mediumorchid                           -> #ba55d3
mediumpurple                           -> #9370db
mediumseagreen                         -> #3cb371
mediumslateblue                        -> #7b68ee
mediumspringgreen                      -> #00fa9a
mediumturquoise                        -> #48d1cc
mediumvioletred                        -> #c71585
midnightblue                           -> #191970
mintcream                              -> #f5fffa
mistyrose                              -> #ffe4e1
moccasin                               -> #ffe4b5
navajowhite                            -> #ffdead
olivedrab                              -> #6b8e23
orangered                              -> #ff4500
#da70d6                                -> orchid
palegoldenrod                          -> #eee8aa
palegreen                              -> #98fb98
paleturquoise                          -> #afeeee
palevioletred                          -> #db7093
papayawhip                             -> #ffefd5
peachpuff                              -> #ffdab9
#cd853f                                -> peru
#ffc0cb                                -> pink
#dda0dd                                -> plum
powderblue                             -> #b0e0e6
rosybrown                              -> #bc8f8f
royalblue                              -> #4169e1
saddlebrown                            -> #8b4513
#fa8072                                -> salmon
sandybrown                             -> #f4a460
seagreen                               -> #2e8b57
seashell                               -> #fff5ee
#a0522d                                -> sienna
slateblue                              -> #6a5acd
slategray                              -> #708090
slategrey                              -> #708090
#fffafa                                -> snow
springgreen                            -> #00ff7f
steelblue                              -> #4682b4
#d2b48c                                -> tan
#ff6347                                -> tomato
turquoise                              -> #40e0d0
#ee82ee                                -> violet
#f5deb3                                -> wheat
whitesmoke                             -> #f5f5f5
yellowgreen                            -> #9acd32

Font-weights:

normal                                 -> 400
bold                                   -> 700

Azimuth keywords:

azimuth: left-side;                    -> azimuth:270deg;
azimuth: far-left;                     -> azimuth:300deg;
azimuth: 320deg;                       -> azimuth:left;
azimuth: center-left;                  -> azimuth:340deg;
azimuth: center;                       -> azimuth:0;
azimuth: center-right;                 -> azimuth:20deg;
azimuth: far-right;                    -> azimuth:60deg;
azimuth: right-side;                   -> azimuth:90deg;

Azimuth behind modifier:

/* if 90deg < x <= 180deg then x := 180deg - x */
azimuth: behind 120deg;                -> azimuth:-60deg;

/* if 180deg < x <= 270deg then x := 540deg - x */
azimuth: behind 230deg;                -> azimuth:310deg;

Elevation keywords:

elevation: -90deg;                     -> elevation:below;
elevation: level;                      -> elevation:0;

Speech-rate keywords:

speech-rate: x-slow;                   -> speech-rate:80;
speech-rate: slow;                     -> speech-rate:120;
speech-rate: fast;                     -> speech-rate:300;
speech-rate: x-fast;                   -> speech-rate:500;

Things you cannot [safely] do:

Long-hand to short-hand with missing properties:

Partial shorthands:

/* there could be previous properties on this node
  (that you can't know about until you have a DOM and all styles)
  that could be wiped out by this short-hand */

background-color: red;                 -> background:red;

Comment CSS hacks:

body >/**/ a { color: red; /* IE7 */ }
body { color/*\*/: red; /* IE 5 */ }   -> leave these hacks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment