n8blog
distraction in action

Those of you browsing the site with Safari or Firefox (or other webkit/gecko-based browsers) may notice a bit of extra bling on the site now. Safari users get maximum bling, Firefox users get slight bling, others … no bling for you! I guess I should post some screenshots to show you what you’re missing, but naah, why ruin a great excuse to try out a new browser? ;)

As always, editing CSS has left me annoyed. I know that it’s important for CSS to be easy to parse and apply, but couldn’t we have simple variables or even functions? My CSS is liberally sprinkled with stuff like background-color: #f60; that says nothing about what the design intent of #f60 is. This from the organization that stresses separation of semantics from presentation? Imagine instead that I could do something like:

let border_highlight = #f60
let button_hover = #f60
...
.somebox { border: 1px solid border_highlight }
.somebutton:hover { background-color: button_hover }

Now if I want to change the border highlight but not the hover color it’s simple, and there’s no worries about accidental search/replace errors. The argument for functions is similar. If you want to define a bunch of related classes multiple times but with slightly different parameters, you end up defining one set, then overriding values to define the second, again for the third, and so on. It would be much cleaner IMHO to be able to define a function to generate these classes and then invoke the function several times. Possibly not a big win in terms of lines of code, but I think it would be easier to maintain.

It is, of course, possible to use the C pre-processor cpp with CSS, so that might be a way for me to get my wish, but I’m reluctant to add a compilation step into my already awkward web-development process. (Speaking of which, css3.info, MacFuse, MacFusion and SSHFS rock!)

So anyway, enjoy the bling, variables are good, functions are great.

  Comments:

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Please type this word with the letters reversed: live