Neatly Sliced

In order to avoid confusion in typing your class/id names from memory, it is best to follow some sort of naming convention. With a proper naming convention, there will be no question on how you have structured your names.

What does CSS allow?

CSS is a case sensitive language. Using camel case class or id names (.className) leaves your naming convention open to future typo errors. Since XHTML elements are all in lower-case, and we are already using these elements in our stylesheets, it would be logical to follow that course with CSS names.

CSS allows for hyphens in the names of classes and ids. Since it is one of the only languages that allows for hyphens in names, we ought we not to exploit this? This also allows for greater readability to anyone who must go reading our stylesheet, since we are now using lower-case names.

Find more suggestions on naming conventions at PHPied’s article CSS Coding Conventions. I linked to this article before, but it’s just so applicable and sensible that I must link again.

The Symptoms

Lost data, tearshedding, massive re-writes

The Diagnosis

Moronic failure to back-up your data on a regular basis.

The Antidote

Write your drafts in word documents so that you have a backup on your machine even after publishing an article. Additionally, or concurrently, run regular backups of your database.

Why should I care?

Just today, I learned that my database had been switched over to a new server weeks ago and that the site was still pointing to the old server’s database. Today, the old database was shut down, leading to downtime and the erasing of recent posts. The recent posts were easily restored via the cached copy in my feed, but the unpublished drafts waiting for publish are, sadly, lost.

So, be smarter than me and don’t rely on your server’s database to protect your data.

The Symptoms

Ignoring HTML elements such as h1, h2, ul, li, and instead styling all text with classes applied to divs and spans. e.g.:

Which displays as this:

The Diagnosis

A case of divitus and/or spanitus.

The Antidote

Use HTML elements and then use CSS to style them.

Why Cure This?

There are many reasons:

1. Accessibility.

   Using HTML elements for headings, lists, and everything else increases the accessibility of your site to users who may not interact with the World Wide Web in the same way that you do. Faulkner at Fadtastic notes that disabled users account for £50 million (USD$98,780,000 at time of writing) of the 2005 market share in the UK alone. Include those people!

2. Code Readability.

   If anyone, and I mean anyone from developer to casual web nut, looks at your source, they will get a basic idea of the structure of your site. This is especially important if you are passing off your work to another developer.

3. SEO.

   Search engines place heavy weight on sites that have pertinent keywords within h1 and h2 tags. The 15 minute SEO checklist (thanks, Daniel) also shows negative points are given to poorly coded sites - yes, that means those suffering from divitus and spanitus, you know who you are.

4. Cross-Media Support.

   With the advent of pocket devices, mobile phones, and gaming systems with browsers, not everyone may support CSS or be able to view your site in the same way as you intended for the screen. Using proper HTML elements, you allow the devices to override the stylesheet if necessary and interpret your document more accurately. Opera's site offers a checklist of additional quick tips to make sites look great on small devices.

I'm sure there are myriads of other reasons to use HTML elements rather than spans and divs. Do you have any to add? Leave a comment and let me know.

When writing stylesheets, it is common for a developer new to CSS to name classes for text as .redBold, .smallText, or .bigBlueBoldItalics. These classes will wrap pieces of text to give fancy schmancy styles.

With CSS, it is best to avoid these literal names. In the case of a site redesign, text that was once .bigBlueBoldItalics may become red, normal weight, without italics, 8px in size - your styles may change and lose their meaning. This may be old news, but I still see "redText" oh-too-often.

Avoid catastrophies as red text labled ".blueItalics" by naming selectors semantically - by what they are and what the content means. Should all employee names be large, blue, and bold? Name the class .employee-name, and style it as such. Naming semantically not only improves readability to those who may have to work on your code in the future, but it also allows a site redesign to proceed with far greater ease.

The same applies to #ids. Do not name your ids #left-column or #middle-column. Instead, analyze what content the div contains. Is it the primary content of the page, the navigation? The name it as such: #primary-content, #navigation. The positioning and styling is arbitrary and should not be a permanent aspect of your naming convention.

Naming your selectors semantically future-proofs your code, allowing stylistic changes to the CSS to vastly change the look and feel of the site without ever having to touch the HTML. This is in accord with the suggestions of the W3C for good class names.

I have previously begged readers for designs that I could code into XHTML/CSS to fulfill my pleasure of the clean front-end languages. As a beacon to my cries, a contest emerges that caters to my lack of visual design skills.

CSS OFF - the brainchild of Tony The CSS Guy and designer JD Graffam - monthly delivers a PSD design and beckons entrants to submit sliced images and code within 12 24 hours of showtime.

The project brings the programmmer's eye to deliver difficult designs with innovative, standards friendly markup. A prize awarded, new concepts delivered, the developer's mindset refined.

I plan to whole-heartedly participate June 1, the date of the first design release. Where will you be?

Zero Footprint Offset helps educate people to reduce their environmental CO2 footprint.

Why should I worry about my CO2 footprint?

Our 'aina (earth) is a fragile balance of resources. In the factory filled, fast-service, industrial world that we find ourselves living, we seem to be taking out of the 'aina more than putting in. It is as money in a bank - we must put return a generous measure in correspondence with the amount if we take out. Many are leaving an excess of CO2 with factories, travel, power plants, and other means. We must start now to respect the earth and maintain a clean, habitable home rather than ruin it.

My footprint:

Calculate your footprint via Zero Footprint

Vehicle: 1.55
Flights: 4.75
Home: 2.93
Total: 9.23
In the past year, I have emitted about 9.23 tons (British tonnes) of CO2.

That’s just above the average of 7.75 tons for a year.

I work hard to conserve energy and CO2 and would have been well under the average, but my flight to Hawaii added 4 tonnes (although I cannot wholeheartedly say that I regret the trip ; ).

This is just the amount of CO2 that I have generated - this does not include the factories that manufacture the clothing that I wear or the factories/car transports/farms that make the food I eat, music I buy, et cetera. Bearing these additional CO2 sources in mind, Zero Footprint claims the average North American emits 20 tons of CO2 per year.

How can I be carbon neutral?

Offset your footprint by being pro-active and undoing your emissions, or work to minimize the footprint with which you start.

• Plant trees and other greenery which consume Carbon Dioxide (CO2) and exude Oxygen
• Practice your three R's: Reduce, Reuse, Recycle
• Use recycled goods
• Conserve energy, as this lessens the load on power plants which release CO2 into our atmosphere
• Ride a bike, walk, take public transporation, or carpool rather than drive a car solo
• Eat organic foods, which are typically raised by pro-environment farmers and lack synthetic pesticides

These are just some ways to undo or prevent the CO2 we each emit to the earth. Visit Zero Footprint Offsets for more information. Don't let yourself be a contributing factor to the ever-darkening sky, the rapidly increasing temperatures, and the fading of all that is green. Keep it green!

detergent 2.0
Originally uploaded by neatlysliced.

I saw this and thought, how wild that web 2.0 design trends are bleeding into mainstream marketing.