How to reach CSS zen?


Tags: css,design

Problem :

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 ?



Solution :

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.


    CSS Howto..

    How to change class of all children with jquery?

    How to make a DIV section clickable?

    How do I keep sibling divs from pushing each other down when I use “margin-top: 4px” on one of them?

    How to put a list of images in a fixed div

    How to prevent a p:menubar from being overlapped by the contents of a CSS template?

    how to affect an element's width by one child element but not others using CSS

    Sencha Touch 2: how to remove right arrow of datepickerfield by using css?

    How can I base one CSS setting on another?

    Grunt: how to concat a .CSS file onto my compiled .SCSS files?

    How to make element slide down from display:none?

    How to make non standard shape buttons, non clickable outside of it's border

    How do I create page transitions for my website

    how to apply jquery ui/css to forum field

    CSS/HTML How to align these elements for a mobile view?

    How to apply CSS to part of some text without breaking the text content itself

    How to figure out which lines of css is not actually affecting anything again?

    CSS3 Challenge - How to get this gradient background pattern without using all the divs?

    How to get rid of an automatically generated span via CSS (un-display)?

    how to trigger a stored property with css color change?

    How do I position the search box to my specs?

    How to hide overflow on slideshow without hiding arrows?

    Show HTML text if window width is too small with CSS

    How to add atributes on pic stored from database [closed]

    Is there a plugin for Wordpress that lets me show HTML/JS/CSS examples? [closed]

    How can I avoid div overflowing my container without using overflow:hidden?

    How to make dropdown hide when clicked anywhere outside of it?

    How to edit mobile CSS in SocialEngine?

    How to use css with UIWebView?

    How to use media queries in css

    how is possible to change not nested elements attribute with css?