5 tips on being smart with HTML and CSS

Remember — always code your site in the most simple and flexible manner. Once you’ve designed and developed your website, and put it online, you can be quite proud of yourself. However, when you come back later to make some changes or improvements, you can discover, to your surprise, that you would spend less time making it all over again, than just updating the current code. Either way, it’s just waste of time and brains. Here are some small tips that may save you lots of time in the future.

1. Don’t use CSS classes that duplicate built-in behavior

Haven’t you at least once used a class like .first, .last? Well, you didn’t have to. You could use CSS pseudo-classes :first-child, :last-child or :first-line and :first-letter. Your code would be reusable, because you wouldn’t have to explicitly define for example the .first class on your first element — browser would find the first child and apply the CSS rules instead. As a result, you could shuffle the child elements as you wish, still getting the correct appearance. The same logic applies to other pseudo-classes.

2. Don’t use images if you can get the same effect with CSS

Take the picture below for example — you could just take the whole button as an image and be done. Instead, it’s better to have the gradient background and the icon in separate image files, and make the button frames using CSS. You could use 3 div blocks, each inside another, with 1-2 pixel margins. You could use the border property. It’s your call — but you get the idea. And making different color skins is just a matter of changing the CSS, in this case.

3. Don’t enclose div elements in a hrefs — use onclick redirection instead

I described this method of assigning links to div elements when talking about nofollow attribute. This may sound strange, but in fact it makes your code not only clearer, but more flexible too. Because you actually want the div element to have a link, not the a href. And it’s good practice to give elements the features you want them to have. Don’t cover them in feature-blankets, just because it’s common practice.

4. Don’t make item lists by hand or with scripts

There’s a rule I am just breaking now. Each of the paragraphs in this article is a heading, numbered by hand. Instead, I should use the ordered list element. Because when you end up with more than 10 elements, adding the 11th at the beginning means rewriting everything. Also, a list is a list, so again — it’s good practice to use the elements what they were designed for.

5. Use generic HTML elements as much as you can (and CSS inheritance too)

Last, but not least, it’s good practice NOT to make many classes in CSS. Instead, try to make your HTML like boxes — and style the elements indirectly, in respect to each box. For example, if you want to make the links in the paragraphs of .content as green as it gets, simply reach for them:

.content p a { color: #0f0; }

And because we are all lazy, we declare our full font description only once — in body. And then, benefiting from CSS inheritance, we just change what we need inside the boxes.

Conclusion

It’s really not an achievement to have hundreds of lines of code of HTML or CSS. The whole point is to do things quickly and neatly. And it’s really hard to make things easy. Ironically. But I hope these few things might just help you a bit. Although, I barely touched the subject. Do you have any other productivity tips you’d like to share? Write me in the comments!