What's Mistaken With CSS – KEEPING GOING

What's Mistaken With CSS

We are recently in the course of a CSS Zen Garden type excerise on our circle of relatives of Q&A web pages, which I affectionately confer with as “the Trilogy”:

(If you had been questioning, sure, meta is the Star Wars Holiday Special.)

Those websites all run the similar core engine, however the emblem, area, and CSS “pores and skin” that lies over the HTML skeleton is other in each and every case:

What's Wrong With CSS

What's Wrong With CSS
What's Wrong With CSS

What's Wrong With CSS

They are not terribly different looking, it’s true, but we also want them to be recognizable as a family of sites.

We’re working with two amazing designers, Jin Yang and Nathan Bowers, who’re serving to us whip the CSS and HTML into form so they may be able to produce a suite of about 10 other Zen Lawn designs. As new websites in our community get democracied into being, those designs will likely be used as a palette for the neighborhood to choose between. (And, later, the neighborhood will come to a decision on a site identify and emblem as smartly.)

Anyway, I convey this up no longer as a result of my pokemans, let me show you them, however as a result of I’ve to in my opinion deal with 4 other CSS recordsdata. And that quantity is handiest going to get greater. A lot greater. That scares me somewhat.

Maximum of all, what I have realized from this workout in website online theming is that CSS is more or less painful. I totally improve CSS as a (most commonly) useful user interface Model-View-Controller. However although you have got excessive HTML hygiene and Austrian ranges of self-discipline, CSS has some serious limitations in observe.

Issues specifically that chunk us so much:

  • Vertical alignment is a big, hacky PITA. (Tables paintings nice for this regardless that!)
  • Loss of variables so we need to repeat colours all over.
  • Loss of nesting so we need to repeat massive blocks of CSS all over.

In brief, CSS violates the dwelling crap out of the DRY principle. You might be continuously and unavoidably repeating your self.

That is why I am so intrigued by way of two Ruby gemstones that try to immediately deal with the deficiencies of CSS.

1. Less CSS

 /* CSS */ #header { -moz-border-radius: 5; -webkit-border-radius: 5; border-radius: 5; } #footer { -moz-border-radius: 10; -webkit-border-radius: 10; border-radius: 10; } 
 // LessCSS .rounded_corners (@radius: 5px) { -moz-border-radius: @radius; -webkit-border-radius: @radius; border-radius: @radius; } #header { .rounded_corners; } #footer { .rounded_corners(10px); } 

2. SASS

 /* CSS */ .content_navigation { border-color: #3bbfce; colour: #2aaebd; } .border { padding: 8px; margin: 8px; border-color: #3bbfce; } 
 // Sass !blue = #3bbfce !margin = 16px .content_navigation border-color = !blue colour = !blue - #111 .border padding = !margin / 2 margin = !margin / 2 border-color = !blue 

As you’ll see, in each circumstances we are transmogrifying CSS into a little extra of a programming language, slightly than the static set of structure regulations it recently exists as. In the back of the scenes, we are producing undeniable vanilla CSS the usage of those little dynamic languages. This may well be performed at venture construct time, and even dynamically on each web page load if in case you have a just right caching technique.

I am not certain what number of of those enhancements CSS3 will convey, by no means thoughts when the majority of browsers on the earth will improve it. However I undoubtedly really feel that the core adjustments known in each Less CSS and SASS deal with very actual ache issues in sensible CSS use. It is price checking them out to grasp why they exist, what they carry to the desk, and the way you may be able to undertake a few of these methods to your personal CSS and your favourite programming language.

Leave a Reply

Your email address will not be published. Required fields are marked *