4 ms·

Admitedly, I'm a relative n00b when it comes to development but seriously "I do not get it". There doesn't appear to be much in the way of reduced syntax, at le

by lowkey 16y ago

Admitedly, I'm a relative n00b when it comes to development but seriously "I do not get it". There doesn't appear to be much in the way of reduced syntax, at least not in the example provided. Can someone explain why this is better or clearer than CSS?

weego 16y ago
There is genuinely a tiny benefit because you don't need to declare colors etc more than once, everything else about it is trying to wedge ideas from other areas of programming into a language that contains so many abstract concepts as to not benefit from it at all. I've worked as a UI developer for 12 years now and I wouldn't go near something like this because there is no value. At least the server side version you can pre-process and package up for live after your developers have saved literally minutes by using it. You need to know CSS inside out, so you have to then unlearn and relearn different parts just to do something you can already do with find + replace. And worse, you are even including and downloading files that the browser cannot even interpret itself without relying on another download of JavaScript as well, so you're giving something that works 100% of the time (assuming someone has CSS on) another point of failure. Most of my time in UI has been in public sector education trying to push standards and quality from various suppliers to the Govt and seeing things like this from said suppliers (I've seen worse to be fair, but I've seen something like this before) is always an unpleasant experience.
- edanm 16y ago
  Let me give an example use case, something I've wanted. Lots of developers will tell you that it's fine to use systems like the 960 Grid System for rapid prototyping, but you shouldn't use them for final, "production" sites. Their argument is that "littering" your code with classes like "grid_4", etc. is not semantic (and they're right). So here's what I would love to do: use a system like 960 in development, but instead of using names like "grid_4", use actual, semantic names. But behind the scenes, I'll use less to "inherit" the grid_4 properties into the semantic name. E.g., assuming I have: "<div class="grid_4 article_header>", I'll remove grid_4, but use less to make "article_header" inherit grid_4's properties. That way my html remains semantic, but I get the full power of systems like 960.gs.
  - isleyaardvark 16y ago
    I'll give another example with mixins: clearfix. I've seen webpages littered with class="clearfix" all over the HTML. That doesn't do anybody any good. With a CSS preprocessor you can define a clearfix mixin and just write it something like: .class-name .clearfix font-size: 1.2em There are other ways to do it like one long string of selectors followed by the clearfix code, but they're not as convenient or readable.
  - mhd 16y ago
    Isn't that basically what compass does? http://compass-style.org/ http://compass-style.org/
edanm 16y ago
There aren't many features, but they fill in various "holes" in CSS (compared to every other programming language). For one example, you can define "constants". That means you can define a color once with a name (say, LINK_COLOR = #aaa), then use that name over and over. Then, if you ever feel like changing that color, you only have to change it once (where it says LINK_COLOR = ), not every time. Other benefits are something akin to "functions", and ways of "nesting" your CSS which automatically makes certain classes only apply to nested elements (this is something most people do anyway, they just do it by hand).
jarin 16y ago
It might not seem all that great from the simple example provided, but Compass (http://compass-style.org/ http://compass-style.org/, uses SASS) is a great example of how mixins can make your life so much easier. For example, if you want to make an inline list it's as easy as: li +inline-list
fadeyev 16y ago
LESS or Sass are great in specific use cases. They're especially useful when you're using a lot of CSS visuals (where you have to write out about 3-5 lines just for one property because each browser has it's own version, i.e. -moz-, -webkit-, etc). With LESS you can create a mixin that does this thing (e.g. rounded corners) that also takes an argument and just call it in all the places where you need rounded corners. Sometimes you want to re-use the same color over in many different places. If you change your mind, you have to go back and change it everywhere, making sure you don't miss a spot. Nesting makes the code much more organized (you have to try it to see) since you can see which bit of code relates to which area of the page. It's just neater and easier to view. Each of these benefits on its own isn't very big, but when you start saving time here and there they do add up, especially on large stylesheets. Basically, it's not really about reducing syntax or size of the file (which does get smaller for large stylesheets), it's all about making the stylesheet easier to build and maintain.

by lowkey 16y ago

weego 16y ago

There is genuinely a tiny benefit because you don't need to declare colors etc more than once, everything else about it is trying to wedge ideas from other areas of programming into a language that contains so many abstract concepts as to not benefit from it at all. I've worked as a UI developer for 12 years now and I wouldn't go near something like this because there is no value. At least the server side version you can pre-process and package up for live after your developers have saved literally minutes by using it. You need to know CSS inside out, so you have to then unlearn and relearn different parts just to do something you can already do with find + replace. And worse, you are even including and downloading files that the browser cannot even interpret itself without relying on another download of JavaScript as well, so you're giving something that works 100% of the time (assuming someone has CSS on) another point of failure. Most of my time in UI has been in public sector education trying to push standards and quality from various suppliers to the Govt and seeing things like this from said suppliers (I've seen worse to be fair, but I've seen something like this before) is always an unpleasant experience.

edanm 16y ago
Let me give an example use case, something I've wanted. Lots of developers will tell you that it's fine to use systems like the 960 Grid System for rapid prototyping, but you shouldn't use them for final, "production" sites. Their argument is that "littering" your code with classes like "grid_4", etc. is not semantic (and they're right). So here's what I would love to do: use a system like 960 in development, but instead of using names like "grid_4", use actual, semantic names. But behind the scenes, I'll use less to "inherit" the grid_4 properties into the semantic name. E.g., assuming I have: "<div class="grid_4 article_header>", I'll remove grid_4, but use less to make "article_header" inherit grid_4's properties. That way my html remains semantic, but I get the full power of systems like 960.gs.
- isleyaardvark 16y ago
  I'll give another example with mixins: clearfix. I've seen webpages littered with class="clearfix" all over the HTML. That doesn't do anybody any good. With a CSS preprocessor you can define a clearfix mixin and just write it something like: .class-name .clearfix font-size: 1.2em There are other ways to do it like one long string of selectors followed by the clearfix code, but they're not as convenient or readable.
- mhd 16y ago
  Isn't that basically what compass does? http://compass-style.org/ http://compass-style.org/

edanm 16y ago

There aren't many features, but they fill in various "holes" in CSS (compared to every other programming language). For one example, you can define "constants". That means you can define a color once with a name (say, LINK_COLOR = #aaa), then use that name over and over. Then, if you ever feel like changing that color, you only have to change it once (where it says LINK_COLOR = ), not every time. Other benefits are something akin to "functions", and ways of "nesting" your CSS which automatically makes certain classes only apply to nested elements (this is something most people do anyway, they just do it by hand).

jarin 16y ago

It might not seem all that great from the simple example provided, but Compass (http://compass-style.org/ http://compass-style.org/, uses SASS) is a great example of how mixins can make your life so much easier. For example, if you want to make an inline list it's as easy as: li +inline-list

fadeyev 16y ago

LESS or Sass are great in specific use cases. They're especially useful when you're using a lot of CSS visuals (where you have to write out about 3-5 lines just for one property because each browser has it's own version, i.e. -moz-, -webkit-, etc). With LESS you can create a mixin that does this thing (e.g. rounded corners) that also takes an argument and just call it in all the places where you need rounded corners. Sometimes you want to re-use the same color over in many different places. If you change your mind, you have to go back and change it everywhere, making sure you don't miss a spot. Nesting makes the code much more organized (you have to try it to see) since you can see which bit of code relates to which area of the page. It's just neater and easier to view. Each of these benefits on its own isn't very big, but when you start saving time here and there they do add up, especially on large stylesheets. Basically, it's not really about reducing syntax or size of the file (which does get smaller for large stylesheets), it's all about making the stylesheet easier to build and maintain.