CSS: Start Generic before going Specific

Published on Oct 23, 2012 by Jamie Munro

This might be a boring refresher for some people; however, I think itís important from time-to-time to go back and visit the basics.† CSS can provide a lot of power to a web developer (or designer), but when used improperly it can cause a lot of headaches.

When using CSS, like doing on development, itís important to stop and think about what you are doing and more importantly, whatís the easiest way to accomplish it!

Letís start with understanding the acronym behind CSS Ė it stands for Cascading Style Sheets.† Cascading, being the very important word to understand.† This means that the base styles you define will carry throughout (or cascade) all of your design unless a specific style is overridden.

Iím going to begin by demonstrating how I typically begin creating a style sheet.




The first thing I do is (typically working with my designer) decide on several important factors like:

  • What is my default font?

  • What is my default font size?

  • What are some of my base colors, e.g. for a link, for a header, body text, etcÖ?

  • What are my default font sizes for headers, and are there any special effects across them?


With these defined, I can now create my base style sheet:


@urlimages: "../img/";
@main-color:#333;
@link-color:#1B75A9;
@menu-link-color:#A19D9A;

* {margin:0; padding:0;}
body {background:#fff; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:@main-color;}
img {border:none;}
ul {list-style-type:none;}

h1, h2, h3 {font-weight:normal;line-height: 1.25}

a {
text-decoration:none; color:@link-color; border:none;
&:hover {text-decoration:underline;}
}


Iím kind of cheating in the above style sheet because Iím leveraging the Less CSS Framework which allows me to define and use variables in my CSS files.† However, even if youíre not using this, the concept is still a good idea meaning that you can define these colors in a CSS comment (/* */) that if/when you decide that you ever need to change them; you can easily perform a search and replace!

After these variables are defined the next things done are creating base styles for the list of items I defined above.† By default all text will use Arial, the font size base is 14 pixels and the color is gray.† Next all images will have no borders, headers 1 through 3 will not be bold and a line height of 1.25.† And finally, all links will have no underline text and a color of #1B75A9; when hovered, the link will then be underlined.

These are all extremely powerful base styles that Iíve defined.† Now, letís look at an example of how and why I would want to override a base style.† In this scenario, letís pretend that the navigation links should be underlined by default and turned bold when hover, I can simply override the default link style as follows:


nav a { text-decoration: underline;}
nav a:hover { font-weight: bold; }


Itís important to note that I didnít redefine any of the styles I didnít want to change because if I donít provide them, it will go up the hierarchy and use what I had previously defined!

Before wrapping this up, letís look at a few bad examples, pretend this was a fresh style sheet:


#title-bar h1{
font-family: Arial Black, Arial, Sans Serif;
font-size: 40px;
}

.subtitle {
color: #000;
font-family: Arial Black, Arial, Sans Serif;
font-size: 25px;
}

p.content {
font-family: Arial Black, Arial, Sans Serif;
font-size: 13px;
}

.post-read-more a{
font-family: Arial Black, Arial, Sans Serif;
font-size: 13px;
text-decoration: none;
color: #000;
}

li a.table-link, li a.table-link:visited {
color: #333333;
font-family: Arial Black, Arial, Sans Serif;
text-decoration: underline;
font-size: 16px;
}


Lots of bad things happening in this example starting with the fact that the same font is defined over-and-over again.† This can easily be resolved with our base body font Ė more importantly, any text defined outside of these specific styles will use the browser default font (I can hear the designers screaming at me for lack of consistency)!† Secondly, throughout the style sheet a specific font is being defined in pixels.† This is another no-no (unless you want exact font sizes regardless of the userís zoom preference).† Instead, itís best to define a base font size and attempt to use and leverage em sizing throughout the rest of the document.

So remember, ensure that you have properly defined your entire base styling as thoroughly as possible because it will eliminate constant tinkering and redefining of your styles in future classes!

Tags: CSS | organization

Related Posts

blog comments powered by Disqus