Styling languages that enforce more discipline than CSS? (But not LESS and SASS)?

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.

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.

1 If I could upvote you more, I would. Everyone seems to try to think of CSS as a "programming language," when it's not. Having tools like LESS can help by making developing CSS more like programming languages (thus not requiring the paradigm shift), but in the end, the CSS is still just name-value pairs.

– Shauna Jun 21 at 14:14 2 +1 This is probably the long and short of it - a solution enforcing discipline would have to control (and structure) what gets put into the DOM as well as on the CSS rules. In the end, you would end up with something like GWT - which many people wouldn't like because it's too restricted. @Shauna I understand CSS is not a programming language, but there still are rules, and a structure, to what it describes.

– Pekka Jun 21 at 14:29 @Pekka - Yes, there are, but not in the way as most people that want a compiler like what you want, like or accept. Following the rules takes more thought and legwork in interpreted languages than compiled, since there's not compiler to yell at you. – Shauna Jun 21 at 15:14 @Shauna that is exactly what my question is about - whether there are approaches to describe design rules in a checkable and compile-able form, with one possible end result of creating CSS.

– Pekka Jun 21 at 15:15 @Pekka, thinking about a solution that ties in with DOM+CSS and that compiles is a good start--that's what I am hinting at though I am not sure it would get you where you want to go. With DOM+CSS, you now have two problems: structure and style. You may even end up with something like ASP.NET server side controls that generate the HTML+CSS.

– aleemb Jun 217 at 6:36.

Wow that's amazing, always looked for something like this... variables in CSS solve so many problems... – OmerPT Jun 21 at 13:08 True - both LESS and SASS (SASS more) have elements that go in that direction. They're not entirely what I'm looking for but absolutely worth a mention – Pekka Jun 21 at 13:10 2 @Pekka - re "SASS more" ... I guess that's why the other one is called 'Less'? (hehehe.... cough... sorry.

Couldn't resist it) – Spudley Jun 21 at 15:06 Sass also has nesting, and functions, and you can extend classes. ZOMG, it's awesome. – Dan Gayle Jun 21 at 17:14.

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 strucutre. 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.

– Pekka Jun 21 at 13:16 1 @Pekka -- somehow I'd neglected to bookmark it, so I had to google for it, but found it and added it to the answer. – Spudley Jun 21 at 13:21 thanks! – Pekka Jun 21 at 13:21 and I've remembered to bookmark it this time too!

;) – Spudley Jun 21 at 13:22.

Just because it's missing: LessCSS is a nice alternative to SASS.

You'll have to be your own "merciless compiler". Things like css lint and less/sass can help you with that but in the end there is always a human, prone to produce a messy css(like) file even with the most strict compiler. Self-disciple, FTW:).

I am looking for ways to solve exactly this problem :) That why I'm thinking in terms of a high-level compiled language - there are still plenty of ways to mess things up, but certain structural idiocies get rejected at compile time. But this may not be possible for CSS. – Pekka Jun 21 at 14:00 +1, although I hesitated on that up arrow when I saw "FTW".

;-) – Spudley Jun 21 at 15:04.

Well you seem to know about Nicole Sullivan, so if you know about OOCSS already, I apologize, but no one seems to have brought it up. If you don't, it's her own project to do this very thing, I believe. It's only in Alpha testing right now, but you asked about efforts and not finished languages, so maybe this will be just what you're looking for.It definitely claims to be be for solving the problems you describe, but I haven't used it myself.

Https://github. Com/stubbornella/oocss/wiki.

Compass is a framework built around SASS. I think it mostly adds features and boilerplate code to add a library of predefined mixins and whatnot. However, Compass might be even closer to what you want.

Compass is based around Blueprint which is a straight up CSS framework (which may also be worth looking in to). To me the best approach would be to take Compass and SASS (or CSS and Blueprint/LESS and something comparable) and to write a very concise and detailed style guidelines which you could develop overtime as you figure out what works best: your first thoughts on the matter, regardless of experience, may be wrong. Once you have these guidelines down you could talk to the people at SASS, Compass, LESS, Blueprint, whatever, about working in some of your well thought out and "researched" guidelines.

OR you could start contributing to these wonderful projects which I believe are all under an open source license (SASS is under MIT, LESS is under Apache and I think Compass and Blueprint also under some form of open source license). Fork it and have fun :D.

2 Just for completeness there also seems to be this thing called HSS... I don't know much about it, but it might also be worth taking a look at – cwoodall Jun 21 at 16:25 Very interesting, I will take a look at this! Thank you. – Pekka Jun 21 at 17:08.

There is Stylus, something like LESS and SASS, but with transparent mixins. That means that you can hide away complexity by bundling it into new key/value pairs. Example from the site: border-radius() -webkit-border-radius arguments -moz-border-radius arguments border-radius arguments form input padding 5px border 1px solid border-radius 5px Maybe this kind of syntax is what you want?

PS: you can still type braces and semicolons, if you prefer ;).

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.