Menu
CSS style sheets have a habit of growing big and chaotic over time.
There are a lot of rules, hints, and schools of thought that help achieving cleaner CSS. (For example here) However, all those require constant alertness, activity and a lot of discipline on the maintainer's end, with mixed real-world success. As Nicole Sullivan so nicely puts it:
In fact, in most cases, the things we considered best practices were leading to the bad outcomes we sought to avoid. I realized (unpopular though it might be), that we couldn’t make it work out well by trying harder. Each time we start a new project, we think “this time, I’m going to keep the code clean. This time the project will be a shining example of what can be done with CSS.” And without fail, over time, as more content and features are added to the site, the code becomes a spaghetti tangle of duplication and unpredictability.
Are there any efforts to create a language of some sort, with strict structural rules and a merciless compiler, that enforces strict rules that prevent style sheets from becoming spaghetti? The compiled end result would be CSS.
I have no idea what such a language would look like and whether, given the vast amount of possibilities and combinations, this is a solvable problem at all.
Is there any research in this field? Anything to try out?
One very interesting related tool is CSS Lint, but what I'm asking about goes even farther than that.
Edit: LESS and SASS absolutely go into the right direction, but they are not what I am looking for. They introduce some very nice features and are a godsend for the CSS developer, but what I'm, asking about goes even further and more into defined, enforced structures.
471
I suppose the correct answer to your question is no, because html includes some basic style elements itself. But CSS is the best way to style your documents and you absolutely should learn and use it. Once you're comfortable using CSS, try using a framework such as Twitter bootstrap to make your life easier.
Why Use Sass? Stylesheets are getting larger, more complex, and harder to maintain. This is where a CSS pre-processor can help. Sass lets you use features that do not exist in CSS, like variables, nested rules, mixins, imports, inheritance, built-in functions, and other stuff.
Of course they do. In fact, every web developer should still be coding HTML and CSS by hand, even in current times where WYSIWYG editors and drag-and-drop page building tools are rife amongst the wider community.
CSS is hard because its properties interact, often in unexpected ways. Because when you set one of them, you're never just setting that one thing. That one thing combines and bounces off of and contradicts with a dozen other things, including default things that you never actually set yourself.
You could very easily write spaghetti code in any interpreted language, so really what you are looking for is a CSS compiler. This is sort of what Google GWT does for JavaScript by generating it from Java code.
However, CSS doesn't have flow control, functions, variables etcetera, which means it doesn't make sense to have a higher-level language around CSS. At the root of it, it's just name-value pairs with cascading logic.
If you want to reign in your CSS code, you need to reign in your DOM as well. If you are defining columns with IDs left and right then you are semantically restricting the designer from moving them anywhere else. On the flip side, if you are smart about things you can do a lot more.
Lastly, the cascading part is what most new designers have the highest tendency to get wrong. If you pay close attention to the DOM and cascading logic, make use some good resets or grid-based frameworks and incorporate tools like LESS (Ruby) or LessPHP, you'll end up CSS that's far more pleasing to work with. I like LESS because It empowers you with quasi-functions, variables and nested properties which really helps clean up your CSS.
101
Are there any efforts to create a language of some sort ... The compiled end result would be CSS.
There are two efforts that I know of to do exactly this:
Less
SASS
Both aim to provide an improved version of CSS which allows you to write with more structure.
In addition, Google have demonstrated a development version of Chrome which incorporates a number of additions to CSS along similar lines. This is interesting because it indicates the future direction of CSS, but in the short to medium term you will need to use Less or Sass, as even the work in Chrome is very much experimental and will not be released for some time to come (and even when it is, you'll need to wait for the other browsers to follow suit).
[EDIT] Here's a link which details Google's experimental CSS features in Chrome: http://johanbrook.com/design/css/webkit-css-variables-mixins-nesting/
[UPDATE 18 April 2012] There has been some progress in this area since I wrote this answer. Slow progress, but progress nonetheless. The good news is that CSS Variables has just been published as a First Draft specification by the W3C. See http://lists.w3.org/Archives/Public/www-style/2012Apr/0228.html for the official announcement of the specification.
So that's goodnews. Of course, how long it takes to get into the browsers and the end user base is anyone's guess, but at least there are signs of progress.
10
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
