CSS looks like a set of tricks to me. Whenever I read about some css technique, it looks much more like tricks that techniques. When I write CSS, I often need to adapt the html structure and I feel bad.
Did some of you had some enlightenment and enjoy CSS zen ? How did you reach CSS zen ?
start re-using classes, and stacking classes on elements, as well get familiar with the specificity rules so you can override some styles as needed, you'll see really quickly where it's actually useful and more than just "tricks".
I'm not quite sure I get what you mean, however, most of my HTML coding is pretty much dictated by my CSS. Its probably not the best way to do it, but I try and use no tables whatsoever and div's as much and as often as possible. From layout to look and feel as well as wherever else I can apply CSS.
I think CSS is a great tool and more than just tricks. It's a whole other way of looking at things.
That's because a lot of the "techniques" are tricks or hacks and
Whatever you mean by CSS zen, you reach it by working your ass off. 10000 hours of work, to be precise, if Gladwell is to be believed.
CSS resets are incredibly helpful.
After a while you learn the different bugs (mostly in IE) and avoid them.
CSSEdit on the mac has more to do with my knowledge of CSS than anything else. It's simple and amazing. Firebug has some similar ability here, but not nearly as awesome.
Most of my stuff works in all major browsers right from the start, even though I develop in webkit. It only comes from doing lots and lots and lots and lots of CSS.
CSS has got to be my favorite part of development. I wouldn't consider it a "bag of tricks". It's a well thought out language with the ability to do just about any layout.
The only time it affects my HTML is when I need to do some javascript effects (like sliding drawers, etc.) -- and usually that just means putting a wrapper around things.
First of all, separate content and presentation completely, and I mean COMPLETELY so... no more
<strong class="red">[...]</strong>(Sadly I see this too much) and all of that other stuff.
css classes (and id's) should describe the content, not define the style. for example, this is perfectly allowed:
<div id="question">
<p>[...]</p>
</div>
<div id="answers">
<div class="answer">
<p>[...]</p>
<div class="comment"><p>[...]</p></div>
<div class="comment"><p>[...]</p></div>
</div>
<div class="answer">
<p>[...]</p>
</div>
</div>you have enough tags classes and id's to do something with, yet no diveritis or presentation logic inside it.
remember... the most important thing to reach CSS zen is extremely well-formed HTML without getting diveritis
Also, if you read about a CSS trick, it is usually not very optimised. The example you gave can probably be more generalized, and finally work with normal coding. However the person who found this version didn't pursue it any further, since he found what he needed.
One last note is to design first for content, and include the HTML for features later on.
The more you use CSS, the better you'll get -- that's all there really is to it. You can read up on CSS techniques every day, but you won't remember a thing until you use it.
CSS mastery doesn't involve knowing a specific trick for a specific situation (that's what the internet's for), but rather being able to come up with a new trick for a new situation.
CSS zen is LESS CSS
There is a .NET Edition for LESS CSS.
As the other posts have mentioned - CSS mastery comes with practice (a couple of small-mid sized projects should be enough to get you to an advanced level and better understand the "frameworks" (quoted because I haven't researched if there are any HTML frameworks but that's the best word I can think of to describe the HTML/CSS separation of content and styling) used by current developers).
Some good resources for you to check out are the W3Schools CSS Tutorial/Reference and of course a plain old Google search to find all those cross-browser compatibility (or box-model related) hacks.
I read an excellent presentation called "Object-Oriented CSS", and I wish I had read it before I started my most recent long-term project.
2 Main Principles:
The presentation goes on to detail 10 Best Practices, and 9 Pitfalls.
Combine what it teaches you with ample use of the Google PageSpeed plug-in for Firefox. It will tell you which CSS selectors could be more efficient, and how to make them more efficient.
I find CSS incredibly useful for re-using and organizing my layout and code. I can't imagine developing a site without using a decent amount of CSS, and since it's a relatively straight-forward language it's easy to make quick changes to a set of elements without having to dig through thousands of lines of code. Maybe I'm just naive, but I love CSS.
I kind of feel like I'm using 'tricks rather than tequniques' with Javascript. Though it's also a must for any dynamic site, it kind of makes me feel dirty to hack together a set of functions that sends asynchronous requests (mainly) because it just looks cooler :).
The road to enlightenment comes when you realise that CSS is great for styling elements but awful for defining layout. So just except that for complex, cross-browser layouts you are never going to come up with a solution that is as neat and pleasing as you would hope. Oh, and excepting the revelation that IE6 was put on this Earth as a means of testing your patience to snapping point would also help!
Understand the basic layout model of CSS.
The basic unit is the box. Block-level HTML-elements like BODY, P, H*n* etc. corresponds to a box in the layout.
A box is rectangular, and by default expands horizontally to the available width. Vertically they are stacked. Boxed can be nested, e.g. a P-box will at least be nested inside a BODY-box.
Boxes can have margin, border and padding, according to the box model: http://www.timofejew.ca/2006/css-box-model-hierarchy/
So, you have a vertical stack (or column) of nested boxes. If you want some boxes to move outside the main column, e.g. as a sidebar, you float (float: left|right) it and it is moved to the left or right edge of the containing block, and the main stack wraps around.
If you want boxes to be laid out horizontally (rather than vertically), you use display:inline-block.
If you need a grid where edges of boxes are aligned in two dimensions, you use display:table. But since IE before version 8 doesn't support that, you may choose to "cheat" and use HTML-markup tables to create the grid.
If you want to place a box completely independent of the flow of boxes, you use absolute positioning, which will place the box exactly where you want - possibly overlapping other content.
Remember that anything you do can be superseded, and that your site must be adaptable to change.
Content is king. Websites are no different to books in that they format text in a way that is pleasing, visually, to the reader, but if you remove the wrapper the site must still flow like a document should.
The best way to know you have got it right is once you've removed all the CSS - this way you can get the bare bones of your informational hierarchy, and if it all looks like everything has equal weight then it's been done wrong.
By using HTML elements for their semantic meaning, you're doing more than reducing the amount of divs you're using, you're creating meaning for your document. Search engines give more weight to pages that have the search term in the heading than in the body content. Screen readers give emphasis to headings, not because they appear larger, but because you have given them priority in the document.
<div class="heading">What I ate for breakfast</div>
<div class="paragraph">Cereal, orange juice, toast.</div>
Even though this works from a presentational perspective, it has far less meaning than this:
<h1>What I ate for breakfast</h1>
<p>Cereal, orange juice, toast.</p>
Being even stricter, you could break down what I ate for breakfast into an unordered list, but that can be considered overkill for this short example. The point is that by using HTML as description of your content, you're benefiting everyone - yourself for better search ranking and your readers using alternative methods to display the page.
Designing for the web is certainly not designing for print. You have to make your site look good for your readers, on whatever platform they decide to use - Mac OS X, Windows, Linux, iPhone, mobile, etc. Before the iPhone appeared, mobile browsers sucked. Most still do, and in these cases once you've written your semantically correct markup you will be able to restyle the site accordingly - after all CSS includes support for many different media, including but not limited to computer screen, projector, mobile, print, screen reader etc.
Not everyone's computer is the same either - colours can be different, fonts installed can be different, hey, they could be using IE6. Never make a user feel that the browser they have is inadequate with popup messages that say 'Your browser is out of date'. Instead adapt. Include wide ranging font families that cover the latest and greatest fonts mixed in with the commonly used ones lower down the tree. Enhance your site progressively, so you can have a great design in IE—and make it even better for those Safari/Firefox users with things like CSS3 multicolumn, or multiple background images.
Thirdly I just want to touch on CSS best practices. It is a mistake to think that you need to give everything an ID and a class in your HTML. Unless you are running a page that needs those IDs for javascript, you should always start without the classes and add them in later.
Make use of descendant selectors like p em { }, child selectors p > em { } and adjacent selectors p + em { } to target specific elements. It's easy to predict patterns in how your documents are styled, and you should not need to create classes 'just because'. A good trick I use is the element + * { } rule - it applies styles to anything that comes after a certain element and it's nifty for clearing floated elements.
I prefer to consolidate many common rules into one big rule, for example if I wanted a bunch of different elements red I'd use something like this:
blockquote, a, h3 { color:red; }
This is much better than giving each of these elements a class, and of course you can always override styles later on. This is the real beauty of css, that any general rule can be cancelled out with a specific one later on.
This turned out a little longer than I planned. To summarise - write great HTML that doesn't need divs (unless you have to for styling workarounds), plan your design to be cross browser bearing in mind all the differences for every user, and code minimally. There's many more selectors out there, and I only touched upon a few here - the point is to code without classes unless you really have to.
well... to reach "css zen" you must enjoy css... if you don't, its not gonna happen. BUT, if you do, then you need to practice. Just make some fake html and try to use css to make it look good.