Starglider Systems BlogVery nice post on CSS Architecture.
I have just read Clean Code and many of the same principles from coding apply to CSS. A particular problem I know is everywhere on mine is splitting classes on attribute blocks to save typing – which of course spreads the definition all over the file!
I will keep an eye on this and the other problems next time I use CSS.
Replacing the -9999px hack shows a simple way to replace text with images that doesn't use the text-indent:-9999px hack.
It simply uses the following CSS:
.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
Very simple and avoids the 2 problems with the other technique – very long lines of text can flow into the container, and apparently (I've never hard this before) the old way can be slow on devices such as the iPad 1.
Smashing CSS: Professional Techniques for Modern Layout – by Eric Meyer covers a number of techniques, tools, tips and tricks on using CSS. The book is very clear about the level of the reader – advanced beginner to intermediate.
If you are really advanced, you will probably know about most tricks, and if you are too much of a beginner you will probably be confused most of the time. This is not a CSS starter book.
The book is divided in 3 parts:
Part I- Fundamentals
Chapter 1 covers a number of tools, such as Firebug, Diagnostic Style Sheets, Reboot Styles and IE9.js. There are many interesting points made about the tools, and it can be very useful if you don't know all the tools (I knew some, but not all of them).
Chapter 2 is about selectors. My (Kindle) chapter is heavily underlined and bookmarked. Several good tips and explanations on the finer points of pseudo-classes, pseudo-elements, attribute and child selectors.
Part II – Essentials
Chapter 3 – Tips – has tips on a number of areas, such as server-specific CSS, styling the html tag, indenting and outdenting lists, and much more
Chapter 4 is all about layout. Most ideas on how to do layout here (mostly ways to do different kinds of grids) are available on the web, but I found the overview and discussion to be useful.
Chapter 5 – Effects has a bunch interesting effects you can achieve with CSS. A few are outdated by CSS 3 but are still presented.
Part III – Cutting Edge
Chapter 6 is all about tables. Mostly about different ways of styling (which are much better than the class heavy ways I've used on the past). There are also two very interesting sections – making CSS based maps and graphs. Both are quite clever, and personally I have never seen it done this way.
Chapter 7 mostly covers HTML 5. The new declarations, media queries, the new color and shadow types and 2D Transforms. If you are interested in the subject, I recommend the HTML 5 and CSS 3 book.
Overall, a good and short read.