cssvault - inspiring creativity

CSS Globe has come up with a list of Do’s and Dont’s of CSS. This series’ part 1 covers the Do’s and Dont’s of CSS Selection, summed up as:

Summary

Do

• When choosing use class names, use class names that describe content’s meaning or purpose, not it’s appearance.
• Use few class names and use them on various elements.
• Use type selectors to (re)set default styling. If you wish, use proper reset techniques (mentioned above).
• Use multiple class names on single element to optimize your css.
• Use combined selectors and precisely target your element

Don’t

• Don’t use descriptive class names like "red", "blueDot" etc.
• Don’t use complicated class names or id’s like "sideIntroSecondaryContentTop". Use descendant selectors instead.
• Don’t use universal selector for resetting entire document.
• Don’t use browser dependent selectors.
• Don’t add unnecessary class names.

Check out the full article.

Probably one of the toughest hills to climb for every CSS beginner is positioning, and this article introduces positioning in 10 very easy to understand slides, with an accompanying screen shot of each technique. Check it out at http://www.barelyfitz.com/screencast/html-training/css/positioning/

I personally am not a big fan of frameworks, but if you work with a team enforcing frameworks is a good way of getting things done consistently and getting everyone up to par when it comes to CSS standards. This article highlights the pros and cons of using frameworks, and is a good reference for the top CSS frameworks available on the net.

Here is an awesome pure CSS, cross-browser drop down menu that can easily be plugged into any site.

The original script is a bit bulky at 10 KB (a whopping 296 lines of code!) but I was able to bring it down to 4.1 KB with a little help from CSS Optimiser.

You can download the optimized version here.

I have been contemplating on writing a similar tutorial, but web designer wall beat me to it. It’s a very well written article, so be sure to check it out. You can also check out the demo here.

When HTML was invented one of the things that we designers and developers have to struggle with is implementing multicolumn layouts. Even creating elegant multicolumn lists that will behave the way you want it to can prove to be a very challenging task. This article sums it all up quite nicely while providing sample code along with techniques to start working with.

Until browsers support CSS 3 specifications, Web builders will need to rely on other techniques for creating multicolumn lists. Here’s a look at some of the techniques that work with today’s browsers.

CSS Tricks points out the novel idea of using the CSS background property to style hyperlinks. While I’m sure most designers / developers have used the border-bottom technique, the use of a image presents greater styling control — something to consider for future projects in case you are aiming for something different.

Image mouse-overs and menus are two of the most important and basic techniques that any CSS developer needs to master. This nice little article on CSS-based navigation is a must read for any CSS beginner.

I never realized how hard it is to do scalable, text-based rounded buttons ™ until recently when I tried to write one for a site that I’m working on. Of course it was not a requirement and I can always capture an image of the button and use that instead, but then there wouldn’t be any sense of accomplishment.

I ended up using multiple , one for each rounded corner:

<div class="rounded-button"><div class="top-left"><div class="top-right"><div class="bottom-right">My button</div></div></div>


I don’t find this too elegant though and I have tried searching for better solutions none of them seem to strike my fancy.

So, for you rounded button gurus out there: what’s your text-based rounded button technique ™ or what is the most elegant solution that you have seen so far? To make things easy, the buttons need not be vertically scalable, just horizontal.

CSS Globe links to an article from a Russian blog listing 15 uncommon CSS properties with links to detailed articles.

Link