Why Base Level CSS is Important

One of the most common patterns I see from inexperienced front end developers is their lack of base level styles. When I say base level styles, I’m talking about the lowest level tags there are: p, ul, ol, dl, a, addresss, etc, etc. It hurts my soul just a bit, when I go into a site to add a few paragraphs above a styled content area, and my paragraph tags have no line-height, no margin, and no font size. I can’t stress enough that if you’re CSS isn’t cascading properly… you’re doing it wrong. There should be base rules for all these elements, especially if you using some sort of reset. From there you can use parent containers to edit them to hearts content… Below is what I use for my base level styles.


/* ===GENERAL FIELDSETS=== */

label           { font-size: .75em; line-height: 2em; display: block; cursor: pointer; }
input[type=text],
input[type=password],
input[type=email],
input[type=search],
input[type=tel],
input[type=file],
textarea,
select              { margin-bottom: .75em; padding: .5em 1em; width: 180px; max-width: 100%; border: 1px solid #666; background-color: #fff; font-size: .75em; color: #000; }
input[type=submit]      { padding: .5em 1em; background: #666; border: none; color: #fff; cursor: pointer; -webkit-apperance: none; }
input[type=submit]:hover,
input[type=submit]:focus    { background: #333; }
textarea            { width: 220px; height: 8em; max-width: 100%; font-family: Arial, Helvetica, sans-serif; overflow: auto; vertical-align: top; resize: vertical; }

/* ===GENERAL ELEMENT STYLES=== */

h1,
.heading1   { margin-bottom: 20 / 36 * 1em; font-size: 36 / 16 * 1em; line-height: 42 / 36 * 1em; text-transform: none; font-weight: bold; }
h2,
.heading2   { margin-bottom: 20 / 24 * 1em; font-size: 24 / 16 * 1em; line-height: 32 / 24 * 1em; text-transform: none; font-weight: bold; }
h3,
.heading3   { margin-bottom: 10 / 18 * 1em; font-size: 18 / 16 * 1em; line-height: 24 / 18 * 1em; text-transform: none; font-weight: bold; }
h4,
.heading4   { margin-bottom: 10 / 14 * 1em; font-size: 14 / 16 * 1em; line-height: 16 / 14 * 1em; text-transform: none; font-weight: bold; }
h5,
.heading5   { margin-bottom: 10 / 12 * 1em; font-size: 12 / 16 * 1em; line-height: 1em; text-transform: none; font-weight: bold; }
h6,
.heading6   { margin-bottom: 1em; font-size: 10 / 16 * 1em; line-height: 1em; text-transform: uppercase; font-weight: normal; }

hgroup { margin-bottom: 20 / 16 * 1em;
    h1,
    h2,
    h3,
    h4
    h5,
    h6  { margin: 0; }
}

a       { text-decoration: underline; color: #999; }
a:hover,
a:focus     { text-decoration: none; color: #ccc; }
a:focus     { outline: thin dotted; }

a.button        { margin-bottom: 1.125em; padding: .5em 1em; display: inline-block; font-size: .75em; background: #333; color: #fff; text-decoration: none; border-radius: 5px; cursor: pointer; }
a.button:hover,
a.button:focus      { background: #666; }
a.button + a.button { margin-left: 1em; }
p a.button,
ul a.button,
dl a.button     { margin: 0; font-size: 1em; }

p,
ul,
ol,
dl,
address { margin-bottom: 20 / 12 * 1em; line-height: 18 / 12 * 1em; font-size: .75em; }
ul,
ul li,
ol,
ol li,
dd  { margin-left: 20 / 12 * 1em; }
ul ul,
ol ol   { margin: 0; font-size: 1em; }

ul.inline   { margin: 0; padding: 0; border: none; background: none; list-style: none;
    
    > li        { margin-left: 0; list-style: none; }
    > li > ul   { margin-bottom: 1.666em; }

}

img     { max-width: 100%; height: auto; display: block; -ms-interpolation-mode: bicubic; }

figure      { margin-bottom: .625em; max-width: 100%!important; height: auto!important; }
figure img,
figure object,
figure embed,   
figcaption  { margin-bottom: .625em; max-width: 100%; height: auto; display: block; }
figcaption p    { display: block; text-align: center; font-size: .688em; color: #666; font-style: italic; }

table   { margin-bottom: 1.125em; border-collapse: collapse; border-spacing: 0; border-top: 1px solid #666; border-left: 1px solid #666; }
th  { padding: 1em; font-size: .875em; color: #fff; background: #333; border-right: 1px solid #666; border-bottom: 1px solid #666; }
td  { padding: 1em; font-size: .75em; vertical-align: top; border-right: 1px solid #666; border-bottom: 1px solid #666; }

pre,
code,
kbd,
samp        { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }
pre         { margin: 0 1.25em 1.25em; padding: 1.25em; white-space: pre; white-space: pre-wrap; word-wrap: break-word; background: #333; color: #fff; }
small       { font-size: 85%; }
sub,
sup         { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup         { top: -0.5em; }
sub         { bottom: -0.25em; }
blockquote  { margin: 0 1.125em 1.125em; padding: 1.125em; border-left: .25em solid #666; display: block; background: #eee; font-style: italic; overflow: hidden; }
blockquote p    { font-size: 1em; }

hr  { margin: 0 0 1.25em; padding: 0; height: 1px; display: block; border: 0; border-top: 1px solid #ccc; clear: both; }

I’ve been developing this code and nailing it down over the past several years. I’ve learned from other’s baselines, and applied what I like most. I continually make revisions to this as well. The whole h1, .heading1, is a recent additional and I think has made the cut. Another style I’ve been toying with including is the following:


p + ul,
p + ol,
p + dl { margin-top: -1em }

Using this style would move up a list that immediately follows a paragraph. This would be appropriate because typically a list that follows a paragraph typically relates to that paragraph, so reducing the margin between the two elements seems like a good idea. Haven’t tested this one out yet on a site build, but you get the point…

Some might argue that including all this markup is solving problems that don’t exist yet, but hell… its better to be prepared then to leave your client, or any future programmers in the dark as to why your sup tag isn’t formatting properly… Cascading is Caring…

posted in: Best Practices, Front End Development
tagged: ,

Comments are closed