see whatever…

jump to menu

October 16, 2008

CSS Systems

Filed under: CSS — see @ 10:28 pm

via Isotoma found Natalie Downe’s CSS Systems, some thoughts about it:

  • a “system” for better communication for the end user (in most cases another developer) is a good and valid point
  • ordering (#17) and grouping (#18) of different style “areas” is mostly on what I would agree on.
  • the term helper classes (#18) for e.g. forms is great. I guess I did this unintentionally anyway but terming it this way is great
  • during the whole presentation (it is a PDF from a pres.) there is lots of “I like” or “I don’t like”. It seems CSS has quite some areas which are a matter of taste (and it seems my taste differs in more than one area…)
  • Using CSSEdit on Mac (which I don’t know as I do not work on Mac) seems to influence how you write your styles too. I normally use Aptana with a custom helper script (server side) which allows working in more than one file but get as an end result a single CSS file (to cut down HTTP requests)
  • Some of the things I do like (but not Natalie apparently):
  • IE specific sheets verses CSS Hacks: I prefer the hacks as IE condiditional comments require:
  • more than one sheet with more than one HTTP request PLUS maintainance problems with styles littered over several sheets (hacks keep related styles together). I do use valid hacks only though and try to minimize them too which normally is possible with most designs to develop HTML + CSS for
  • “Selector based indentation” (#44): This is actually something I do quite often. Not for everything but for the styles Natalie would put into the area of “page structure” (the layout I guess) and “page components” (some say “modules”). The general layout (e.g. 2 column-container with a left and and right column in it) seems a perfect fit for indentation. As this general layout is mostly quite simple (as it is a skeleton only) and stable hopefully ;) (if not the HTML and there for CSS has to change substancitally anyway) I don’t see a problem of maintainance here. Also as page componens/modules are normally not really that long (I find for most designs and therefor also page modules the HTML is quite simple and therefor the CSS mostly too) and are by definition self-contained (a module…) indenting there is a helpful way to make the CSS more readable. If you factor out helper classes (e.g. for a specific kind of link or headline or list etc) these groups become even smaller so indenting makes these even more useful.
    If you use CSSEdit this may be different but it seems CSSEdit does show something like an improved version of Aptanas “Outline” which I do not find very helpful anyway so guess CSSEdit would not help me much either (again a position of tool and taste)
  • Maybe indentation also is a matter of what programming languages you use? I could even live with a CSS without any curly braces just defining declaration blocks by indentation. But that would be a Python programmers wish (actually there is a script which allows you just this but for that I am more a HTML/CSS than a Python guy ;) ). But the same as Java programmers seem to hate indentation with a meaning in Python some people seem to ignore indentation in CSS as a help for adding addiotional information/context
  • Class instead of element name selectors: Indentation makes most sense if you have a self-contained module with selectors mostly using element names and not classes (at least not module specific classes). E.g.:
  • .download {}
      .download h2 {}
      .download ul {}
        .download li a {}
        .download li .specific-helper-links-extended-here {}
  • this way you minimize the amount of classes needed altogether (yes you need to keep track when e.g. changing the “h2″ to an “h3″ but if you change the HTML for this case the whole structure where this module is used changes so you should be aware of the anyway. But I am not dogmatic here, you may still use a class “.header”. If you are worried to use “ol” instead of “ul” you probably will be better of styling the “li” anyway) [but I am drifting off...]
  • I do agree on to think about “what” to style and not “where” (#44) it will be (semantically on the module and not the single HTML element level of course so this is not really an argument against indentations of related style declarations IMHO). Anyway, the CSS classes reflect this in their “semantic” naming as a result. Sometimes there may be a problem here though. For designs not being stable yet (but the CSS to be done nevertheless, deadline ACK!) but also for websites running a long time and being extended/changed etc,  sometimes finding a proper and longlived name is sometimes really difficult. Especially if you get a design, start trying to find related modules and their respective (class) “names” but then the design uses just the same before defined modules for sometings totally different or the actual client puts totally different content in these the semantic names are actually totally wrong…
  • Sandboxing (#47): I agree on this which seems to contradict my point made about indentation. But in my experience most people simply try to be too clever (and therefor complicated) or sometimes even too bureaucratic. Simplifying the CSS (leave out any not needed selector part) sometimes make a sheet not just dramatically shorter and maintainable but also
  • style leaking by keeping the element name with a class it maybe ok for helper classes but to page components (which I would equal to modules – not sure now if Natalie actually meant this) I find an adding of a module class (above example “.download”) sufficient.
  • “height” being evil I strongly agree on…
  • 2 points I think are missing:
  • #id versus .class: I only use IDs for tying label and form elements together and anchors so normally NOT for CSS styling at all (maybe for Javascript enhancements but even then hardly). You mess up your cascade and also you never know if you may use a style declaration again (which you can’t in case it is an ID without duplication the style declaration OR adding another ID…)
  • Once you use “!important” you are lost. Never use “!important” except maybe for print styles or even more-maybe for IE bug fixing but you have to be very careful…

Powered by WordPress