Today I would like to talk about style, and some of the ways I go about writing CSS. There are lots of methods and tips to find out there, but hopefully I can share something unique that might help you in your writing habits.

Importing Stylesheets

One of the first things I will do in a style sheet is drop in a few imported style sheets, like this:


@import url('css/typography.css');
@import url('css/layout.css');


Importing style sheets keeps CSS trimmed and clean. I also tend to use certain styles over and over again like typography or layout styles. Usually these style sheets can be modified to a small extent to make them usable for a new site design, without having to re-do all of the same code as before.

Reset.css

A style sheet to reset styles initially is crucial to have. By not resetting all of the default styles on the page, you are allowing the browser to decide for itself how it should display certain elements. I tend to agree with the great CSS giant Eric Meyer, who has said:

Elements are nothing alone. They act the way they are told…And I don’t want anything acting like anything unless I tell it to.

Meyer’s reset.css is the best, which is why I use it.

Ems and Pixels

If it were up to me everything on the web would be sized in ems. Unfortunately, it isn’t always possible to build (what I think of as) a vector web just yet. Right now we’re stuck with raster. But while there is an excuse when it comes to sizing elements and their spacing/alignment, there is no excuse for anything but ems for typography.

I start by defining the font size in the body element to 62.5%. This sets the base font size (1em) to 10 pixels, which is pretty easy to scale and keep track of as you go. Then, if I want 12 pixel text, I set the font size to 1.2 ems. You get the picture.

Clean Code

When it comes to the literal act of laying out code things can get pretty messy fast. I’ve gone back and forth about the best way to do this. I used to write in this common way:


div.style {
  font-size: 1.2em;
  line-height: 1.8em;
  margin-bottom: 1.8em;
}


And that works really well. Recently, though, I’ve been doing it this way:


div.style { font-size: 1.2em; line-height: 1.8em; margin-bottom: 1.8em; }


Using this method, I find I don’t have to scroll nearly as much, and to my eyes it looks very clean.

Commenting

Commenting the styles as I write them is integral and serves two distinct purposes: organizing code into appropriate sections and describing styles/decisions/hacks/anything for the purpose of being able to understand it all later.

I use comments to break up my code pretty simply, usually something like:


/* Header */

/* Footer */


And that works pretty well. I also use it to describe certain stylistic decisions and explain some code to myself, for the sake of my sanity later. Every once and a while I think: But I understand how this works. It isn’t really complicated. Ah, but once I walk away from it, three months later, it will be complicated. The best advice I’ve ever heard, when it comes to commenting code, is to think of yourself looking at this three months from now: that is how someone else will look at it, and that’s, in the end, why you want to comment (for yourself and others).

What I Want to Begin to Do

I am pretty good about listing my contact information, version information, etc. in each style sheet, but I am not very good about leaving notes about when the last edit was made. I think that would really be helpful information, especially considering how it seems I am always updating and re-editing code across many different sites/themes/blogs.

Speak up

Was any of this helpful? And even if it wasn’t, point out where you disagree. And finally, what are you not doing that you want to be sure and start doing in your code?

Credit

I was inspired to write this post after reading Creating Sexy Stylesheets over at Think Vitamin. Tim Wall at Element Fusion was kind enough to point my attention there.

• Where, grammatically, should this content go?
• What markup is available that would correctly show this?
• If necessary, how can I style this so that it appears like it seems it should?

From these questions I try to find the best way to mark up content. In this way I want to look at images, most particularly images in blog posts, and see what the best way to mark them up might be.

Where, grammatically, should this content go?

An image is a unique form of content. There seem to be two uses for images, and I’ll attempt to define them below.

Decorative images

Used to decorate the design of a website, usually not critical to the consumption of content

Content images

Used as a substantial source of content within the site, and usually is critical to the consumption of content

A couple of examples of what I’m talking about:

The above screen is taken from Church Marketing Sucks, an offshoot of the Center for Church Communication, something I’m pretty passionate about. As you can see, the background image on the site is for decoration, as is the header sweeper design. I consider these decorative because they could be stripped away without the content of the site going away.

The above screen was taken from an article via A List Apart, which you can see by clicking either the image or this link. Actually it’s not a bad article—it talks about using Javascript to help with image placement, which is yet another technique. Anyway, the point of this page is that the image within the content is intended to work cooperatively with the content, and would detract from the message if it went away.

I use a different technique, depending on whether the image is intended to contribute to content vs. decoration. If something is intended for decoration, I will do my best to make the image the background of a div. Only if the image is intended to contribute to the content (such as the ALA example) will I use an <img> tag.

What markup is available that would correctly show this?

One of my pet peeves is when designers use class titles like alignleft and alignright when styling content images. The issue I have with this is the same I would have if these class names were used to name divs being floated to the right or the left. The problem is simple: the purpose of class names is to identify the purpose of the element, and not describe them according to how you will style them. This way, if you change the style of these elements later, they aren’t classified incorrectly.

This same principle applies to content images. If content images are styled with alignright or alignleft, either by the user or a WYSIWYG editor, their positions can’t be changed later without having awkwardly classified images.

I suggest three classes for content images.

1. main
2. major
3. minor

With this system, I analyzed how images could be aligned and matched them up with appropriate semantic classifications. A main image, for instance, is centered horizontally and text doesn’t wrap around it. A major image floats to the right and wraps text to the left. A minor image floats to the left and wraps text to the right.

The CSS for the images would look like the following.


img.main {
margin: 0 auto 1em auto;
display: block;
}
img.major {
float: right;
margin: 0 0 1em 1.5em;
}
img.minor {
float: left;
margin: 0 1.5em 1em 0;
}


Then all you have to do is add class=“main” or other classes to the img tag and there you have it. Images with proper classifications and correct alignment that could later be changed to fit a new hierarchy or site layout.

Benefits to Proper Image Classification

• Uses classes correctly
• Makes content forward–compatible
• It’s proper semantics

Negatives to Proper Image Classification

• Won’t work well with WYSIWYG editors
• Requires more work/case by the user

These are techniques with kinks which I’m still working out. For instance, I still want to figure out a solid way to use this technique in conjunction with captions. I’m addicted to Arun Kale’s technique in The Morning After theme which I’ve been using at Theme Playground. I’ll post once I perfect this technique.

This post was initiated, in part, by Sarah over at BlueJar with her post How to Position Your Photos and Images Using CSS. I’m kind of a semantics dork, so this topic caught my attention. Overall, I look forward to seeing these things develop, especially as far as valid, semantic blogging is concerned.