LESS

[jensen]

Am still working on my CSS and would like to know what's the fuss with LESS and SASS.

This has a long list of frameworks and some have SASS, some have LESS and others have both. How does SASS and LESS help speed up or make better websites?

 

[essellar]

It might not make much of a difference for long. Basically, LESS and Sass are two approaches to solving a single problem in standard CSS as it was when they were introduced: the lack of variables. The only way to ensure that, say, a colour change propagated throughout your site's design was to either rely strictly on inheritance (which works only when the design is relatively simple), to mix presentation with mark-up (by adding a presentation-related class to each item so you could insert the colour into that class's CSS), or to hope that you didn't miss any entries in a long stylesheet. Putting, say, [USER=137980]@brand[/USER]-color into the CSS, then simply changing what [USER=137980]@brand[/USER]-color means in one place is a lot more maintainable. And that's just the simplest kind of example; you can hide a lot of styling info behind a variable or a mix-in. With variables coming into the CSS standard (and in browser implementations ahead of the standard), it's not such a big deal anymore - but see below.

It's valuable enough, given anything more than the simplest kind of design. Unfortunately, it gets used badly. It makes a lot of sense to maintain the CSS that way; it makes approximately zero sense to serve it that way (as happens with less.js) or to do service-time compilation (both Sass and LESS do this). A far, far better idea is to maintain source files in Sass (more like a programming language, so more programmer-friendly) or LESS (more like CSS, so more designer-friendly), then compile them into a proper CSS file that's referenced on your pages. (There is a PHP script for LESS that makes it easy either on your server or on a local XAMPP/WAMP/Linux LAMP stack installation.) The current crop of web devs seem to keep re-discovering the idea that their users have computers, so they can do the processing. Well, yeah... but that means a metric boatload of HTTP requests for the source files, processing cycles that mean battery life on smart phones, tablets and laptops, and giving up the option of caching the files and skipping the download. Sass and LESS are good, but they're far better if you do the compilation and serve cacheable CSS files.

 

[jensen]

These little stuff can throw one off course when designing a website.
Will follow your advice and just work on writing proper code and CSS the old way - notepad

edit: Ok, I use notepad ++ more often than notepad these days.

 

[essellar]

I tend to use the JetBrains tools. They're not quite as free as Notepad++ (and there is no way around the price advantage of free when compared to any level of not-free), but there are a lot of advantages to developing with something that's more than just an editor (with syntax highlighting and code-folding, admittedly). Whether they'd be worthwhile to you or not depends on whether or not you have clients who will (unknowingly) pay for them. What you "lose" on one project, paying for the license and learning the environment, you make back in spades on subsequent projects - even if the only time savings you realise is not having to look things up (because of code hinting and code completion), that can still translate into higher hourly rates that still save the client money (or you can be a little less optimistic with your estimates without feeling guilty or winding up with "crunch time" you actually knew was going to happen but couldn't admit).

Nothing will make this game easy, no matter what anybody is promising, but there are some tools that can make things a little quicker and a little less messy. An editor/IDE that knows not just the syntax, but how the languages work (and what your objects do and what your tables look like and so forth) can be a huge help. It's still not a silver bullet, but it's a pretty good stick with a nail in it.

 

[jensen]

https://www.jetbrains.com/ which ones do you use?

 

[essellar]

These days, just PhpStorm. It's a great editor/IDE for PHP/MySQL, HTML, CSS and JavaScript. I used to use IntelliJ IDEA with a bunch of plugins (it covers Java natively, but you can add on the equivalent of PyCharm, RubyMine, AppCode, and WebStorm/PhpStorm), but I don't work in Java, Python or Ruby enough to maintain a license anymore, and the versatility also comes with a bit of slow - the individual products trim out code they don't need and optimize calls for what they do need, so they're more responsive on a given machine. Which is good, since my machine isn't exactly up to date, and it's been tuned for Photoshop, which makes it less good for everything else (I do retouching and print preparation more than anything else these days - less need for the old man to remember what he's done, and a whole lot less sensitive to whether or not I can "stay in the zone"). PhpStorm can keep up with me while I'm running a browser and playing music.

(That's a big deal - I used to work in corporate development using a platform whose IDE was built around Eclipse but had very little to do with vanilla Java - most code was written around an APL-like macro language (immensely fast and efficient for list/array processing), a variant of Visual Basic with tight ties to the client UI for rich client apps, and a JavaScript-based variety of JSF that sort of allowed one to write JVM code in functional style, with a light dusting of plain ol' Java, mostly for the equivalent of crons - so everything was a plugin. With a 3GHz Core2 Duo and 4GB - which was a pretty heavy-duty machine at the time - I felt like I was back in the '70s, using a dumb CRT terminal and a PDP-11, waiting for the computer to echo characters I typed back to the CRT. Meanwhile, the fans were screaming and the machine was doing a good impression of an industrial space heater. It was actually making me more productive, but it sure didn't feel like it.)

 

[jensen]

wow! so much experience. wow! using eclipse.