What you think about LESS CSS?

I think for simple examples it would appear to be more code. The code isn’t about trying to get it as small as possible anyway - it’s about making it readable and maintainable.

Even more so because it will only be adding stuff and thus be completely backward compatible. If you don’t want to use it you’re completely free to use


h1 { 
  font-size: 2em;
}
h2 {
  front-size: 1.5em;
}
h3 {
  font-size: 1em;
}

While I’ll be using


h([1-3]{1}) { 
  font-size: 1em + (3-$1) * 0.5em;
}

I can see how that would be confusing to non-programmers though if they ever saw that, especially the regex parts.

Yeh, that kind of stuff would be awesome, really don’t understand the resistance to that kind of stuff. I saw something to do with groups as well which would be cool:


#content (p, li) a {

}

Equivalent to:


#content p a,
#content li a {

}

If I were to use it in a production environment I would probably use Assetic with its LESS filter and cache the output. I am constantly making small tweeks on things that have been “completed” so going through a recompiling would be a pain in the a*s given my situation.

  • I don’t even think the creators think the client-side parser is a good idea, merely they created it because they could.

I think what many people are failing to understand is this point. Its not all that useful for small one off sites that get created and pushed out the door. Its more for people who have to maintain what would be considered web applications, then a simple static or fairly low scale site. I’m not in the position where I create something and never see it again, all of my work is constantly evolving, though “complete” so maintainability is significant factor with everything I create. To that end LESS does provide some very useful tools to aid in maintenance and being DRY. I’m looking at its use from a perspective of creating admin UIs and custom content manage systems w/ customizable front-end – not small mom and pa one offs.

I don’t really understand how any of this relates to the discussion at hand. The discussion is not about this grid system and how improperly it uses less its about less itself. LESS is a tool, like any tool it can be used in a good and bad way.

To me this is much more readable then the alternative… just saying.


.aggregated {

	list-style: none;
	padding: 0;
	margin: 0 .5em;
	
	
	 a {
		display: block;
		font-size: 1.25em;
		font-weight: bold;
		color: black;
		text-decoration: none;
		padding: .5em .35em;
		border-bottom: 1px solid #818686;
	}
	
	.ad a {
		background-color: #D8EB9C;
		color: #D03135;
		text-transform: uppercase;
		font-family: Helvetica, sans-serif;
	}
	
}


.aggregated {
	list-style: none;
	padding: 0;
	margin: 0 .5em;
}

	.aggregated a {
		display: block;
		font-size: 1.25em;
		font-weight: bold;
		color: black;
		text-decoration: none;
		padding: .5em .35em;
		border-bottom: 1px solid #818686;
	}
	
	.aggregated .ad a {
		background-color: #D8EB9C;
		color: #D03135;
		text-transform: uppercase;
		font-family: Helvetica, sans-serif;
	}

Is that really all that complex or hard to understand for you “none programmers”.

How so? Seems that LESS was invented to provide that. Do you have a CSS only way to globally update values in one move? I am not even a programmer and when writing CSS for the first time, even I was saying to myself “I wish I could just define this in one place.” I didn’t even know I was talking about variables. So if you have a way to do it, please tell.

Abut the extra lines, that doesn’t really matter, if the compiled output has fewer lines. The point is not to get lesser lines of code, but to make the code easier to maintain.

I’d have to agree.

I wouldn’t know about that, being a programmer myself, but I don’t see any advantages of the first example over the second.

LESS isn’t CSS only, so that’s really a straw man. A simple search-replace is a lot easier, though. If you really want variables, why not use a simple PHP (or whatever server-side language you use)-parsed style sheet? Same functionality, without a massive framework or a new syntax.

Oddz’ last example looks to my eyes tomato tomahto (I don’t get a benefit, except the “original” css tells me more since I don’t use code folding… so if the .aggregated class was already scrolled off-screen I’d only be sure the indented “a” was a child of someone… would have to scroll up to remember who… at least if I were sitting on that page for a long time, left, came back and forgot where I was). Though I do use that indenting style to tell me the same thing.

While it may not be that big of a deal to repeat 5+ lines of CSS to support many CSS3 properties in all capable browsers, it does quickly become a pain. Even worst is if implementation changes there isn’t a single thing to change, you need to go through and update all occurrances of the code. Using less a single function can be created to apply the CSS3 and easily updates once if something changes.

I like to lump this stuff into “the text editor or IDE should be awesome enough to do most of this for you” section. I mean, to me, it’s a code management thing, and text editors should let you manage most of these issues your code. Maybe that Less/SASS is popular means people aren’t using good editors? Or don’t have access to them?

But if your site is using lots and lots and lots and lots and lots of the vendor prefixes? Yeah, the SASS/LESS method could make the resulting stylesheet much easier to read. When I paste from a buffer, the writing is easy but the reading starts to get pretty ugly quickly. They say you read code more than you write it in most jobs.

Even regular expressions being used in the selectors would be useful as well,

Regular expressions in CSS is definitely tempting.

I don’t understand the resistance to change on these things, for the very artificial reason that people don’t want CSS to become a ‘programming language’. The primary purpose of the language should be to make it useful, not to please some people who don’t want to have learn some new concepts. Oh well.

I dunno about anyone else, but as someone who is completely comfortable in CSS, when I hear (usually) programmers whine about how there are no rules and it’s senseless and who the hell wrote this and what were they smoking and this is why stupid designers shouldn’t be allowed to write languages… I roll my eyes and get kinda pissed.
This is programmers complaining that CSS isn’t a programming language. It’s not that it would bother me if someone rewrote CSS to be a programming language, it’s the people not bothering to learn the rules of CSS and then saying “automargins don’t work, it didn’t center the span.” Go back to XSLT then, I say. Or, now you have less/sass. Whatever prevents you from bothering to learn CSS, and still gets the job done.

Do you have a CSS only way to globally update values in one move?

I use a text editor for that. Sometimes I struggle, but that’s due to my lesser vim knowledge, not because it can’t be done. Global search and replace takes a lot of load off writing.

LESS isn’t CSS only, so that’s really a straw man. A simple search-replace is a lot easier, though.

“Things like globally updating colours in one move is nice, but this can be done much faster in a number of less-complicated ways.”

I just want to know what those ways are, short of search and replace, which is definitely not less complicated, or faster, and is definitely more of a hassle than setting global values IMHO.

If I have a choice: set one color with a variable, then change it once and upload the compiled CSS, or do a search and replace over and over, I would choose the former.

Sure, but why bother if you don’t have to. It doesn’t seem very DRY friendly to sit there and copy/paste paste paste, when all you have to do is change one variable, compile, then upload the standard CSS. I still don’t see the benefit of doing it the hard way.

“Things like globally updating colours in one move is nice, but this can be done much faster in a number of less-complicated ways.”

I just want to know what those ways are, short of search and replace, which is definitely not less complicated, or faster, and is definitely more of a hassle than setting global values IMHO.

If I have a choice: set one color with a variable, then change it once and upload the compiled CSS, or do a search and replace over and over, I would choose the former.

So pressing Ctrl+H is more complicated than installing LESS on all your hosting accounts, not to mention learning a new syntax? It might be that I’m simply very proficient in search-replacing, but I just don’t buy that argument. And you wouldn’t need to do the search-replace over and over, any more than you would have to re-compile the CSS over and over.

Also, you didn’t comment on my alternative method, i.e. using the server-side language you’re already using to parse a style sheet with variables.

No need to install LESS. You just use LESS.app and it automatically converts the LESS code to standard CSS and upload. So right now, yeah it seems easier. But it could be you are using a search and replace method I am not familiar with.

Also, you didn’t comment on my alternative method, i.e. using the server-side language you’re already using to parse a style sheet with variables.

See above. :slight_smile:

Oddz nailed it :wink:

Srlsy though, I think all of us agree that even if we would use LESS, that the client side version is a horrible idea. If we get over the fact that a JS implementation for this obviously sucks, there are some niceties to be had.

Not surprised you agree with regular expressions. Agreed though, regex selectors would be awesome.

I see a lot of people saying “Why use variables, why not use search-replace”. Would you use text strings that are the same, spread out in your [insert language of choice] applications? Nawwww, you’d create a variable. Why shouldn’t we treat CSS the same way?
If nothing else, the variables and functions (mixins) would be the perfect solution to keep CSS more DRY.

While I realise CSS is supposed to be cascading … the theory behind defining global properties in place and letting them cascade down works well… until you have large site with lots of selectors. Having 1 style rule that cascades with 30 selectors in it isn’t very nice and can make it harder to keep track of what styles are applied to a particular selector. (I know there’s always Firebug, but I’m talking about looking in the CSS file directly, after you’ve written 1000 lines, it might not necessarily be easy or clear what’s happening if you have selectors all over the place with different styles being applied. Maybe this is just my way of writing CSS)

Regards, Devil’s Advocate (& lover of variables) :wink:

As far as I can see there are 2 real benefits of variables over search / replace (in the context of colors).

  1. I can give them a name I can remember and that actually mean something. Compare which @mainLinkColor with #a8c211. Which do you like best?

  2. If I change the value, the variable name remains the same, which is an advantage. Let me give a for instance:


.somesection {
  color: #123;
}

.someothersection {
  color: #456;
}

.blah {
  color: #456;
}

.etc {
  color: #123;
}

Now suppose somebody wants me to change every #123 to #456. I can indeed easily do that with a search and replace. But, suppose now they get back to me and say the color needs be changed back (and I don’t use a versioning control system), and I’m screwed because the color is the same everywhere and I have to figure out manually for each class if it’s supposed to be that value, or if it was supposed to be the other value.
Now, had I had,


.somesection {
  color: @color1;
}

.someothersection {
  color: @color2;
}

.blah {
  color: @color2;
}

.etc {
  color: @color1;
}

I could have just changed the value of @color1 back to what it was and be done.

(this is the problem of all search/replace, not just for CSS. Which is why ideally you should always ctrl+f the thing you’re about to replace and check if you’d really want to replace each instance, so as to avoid hour long debugging sessions because some of them should not have been replaced at all.)

I just looked at LESS for the first time. I don’t know about you, but it took me about 3 minutes to figure out all the additional syntax. I think I could use it now no problem. Didn’t exactly have to spend much time learning anything new, because it’s really not anything new. It’s just new to CSS.

Mixins, variables/constants and expressions are things I’ve wished CSS had. It’s not surprising to me somebody else thought the same and created LESS. Maybe it’s not useful to you, or maybe you are just so use to CSS that you are comfortable with it and would be content to continue using what has managed to work for you so far. Seeing as how I’m relatively new to CSS though, I see these as being features CSS probably should have natively. If not should, then simply could, which is good enough reason for me. I’m all for expanding my set of tools instead of becoming attached to only one and forcing it to work in all situations.

My opinion, for what it’s worth.

I have no trust in search and replace, the whole thing scares me.

Right now I have to do this which sucks. Using less there could be a single style sheet that assigns the server-side variables to CSS variables, which would much nicer.


.somesection {
  color: <?php echo $color1; ?>;
}

.someothersection {
  color: <?php echo $color1; ?>;
}

.blah {
  color: <?php echo $color1; ?>;
}

.etc {
  color: <?php echo $color1; ?>;
}

sdt76
Might be. Compared to converting a site from ASP.NET to PHP using search-replace, updating a style sheet is pretty straight-forward. And if you really want variables, using a PHP-parsed CSS-file is still significantly more straight-forward.

ScallioXTX
If you would every really need that, simply add a meaningful comment after the line. Thus, you can do a search-replace for background-color: #000; // menu background/background-color: #333; // menu background. No worse than having two variables with the same value.

It might just be me, but I still don’t see it.

I see a lot of people saying “Why use variables, why not use search-replace”. Would you use text strings that are the same, spread out in your [insert language of choice] applications? Nawwww, you’d create a variable. Why shouldn’t we treat CSS the same way?

This is what ends up getting spit back to the browser anyway (strings that are the same, spread out in your CSS), since CSS itself still doesn’t support variables. Less does. CSS doesn’t.
It’s supposed to save write time, and if it cleans up vendor prefixes, it’s supposed to save read time as well. If I’m ever in a situation where what Less/Sass offers really gives that to me and my other tools fail me, I’ll go back and reconsider them. Today, they are an unnecessary layer of bull for me. Doesn’t mean they are not for others in other situations.

I personally like seeing the colours themselves rather than a name for them, and the issue about not versioning/having crappy versioning has indeed hit me, but whose fault is that? Mine, for not using versioning. Because, I did have a situation with a site (a large site… probably the largest CSS I’ve ever written) where a manager kept wanting to change entire colour schemes… so not “change the background colour” but then you have to keep contrast in mind and change the colour, borders, and buttons. Then he looked at it for about 3 days and wanted to go back. Or to another scheme. And he did this for months. If I had been smart and had been using git or something at the time, that would have been a single command in my terminal and, done. The page is now abandoned since the site is gone and I still sometimes go looking at the CSS sheets where I see all my lines of commented-out old colours. Bleh.

I retardedly posted this in the wrong thread…
…the Sass site has an article, SASS vs SCSS, which syntax is better which has some of the warnings (for example, the possibility of two much nesting if you don’t watch yourself) and whatnot