4 ms·

The CSS compilers really dont make much sense to me. The language is very easy/simple as is (vendor prefixes are a mess though) and having a compiler's overhead

by Achshar 14y ago

The CSS compilers really dont make much sense to me. The language is very easy/simple as is (vendor prefixes are a mess though) and having a compiler's overhead on every request does not feel right to me. I love JS though, in fact it's my favorite go to language for all kinds of work, heavy duty or light. I thinks that is also a part of the reason I am not inclined towards languages that compile to JS, they kind of destroy the experience of writing JS, which I am very fond of.

TazeTSchnitzel 14y ago
What request overhead? I thought people used them when developing and pushed the compiled result to the server. And I love JS too, but I use CoffeeScript since it's basically syntactic sugar for JS that saves me some keystrokes and makes my code more readable.
- Achshar 14y ago
  > I thought people used them when developing and pushed the compiled result to the server. Oh well, i see, that makes sense, but as i said i don't use them so i don't know very much about them. I probably should use them once just for the sake of checking them out. And coffeescript too. Thanks!
duskwuff 14y ago
If you're running the LESS compiler on every request, you're doing it wrong. Doing that might make sense in development, but for deployment you're expected to run the compiler once to generate a single static, minified CSS file. Same as JS compilers/minifiers in that respect. As far as what these compilers do? Yes, CSS is nice enough as it is; that's why these compilers don't mess with the syntax too much. Most of what they're useful for is acting as a macro preprocessor (so you can use @color macros and automatically generate vendor prefixes, for instance), as well as for efficiently combining multiple source files. If you're not familiar with how useful CSS compilers like LESS can be, I'd highly recommend that you take a look at Twitter Bootstrap. They use the macro-processing features pretty heavily, and to impressive effect. For instance, most of the colors in a Bootstrap site are configured in variables.less -- including light/dark color variants! -- so you can change around the whole color scheme of a Bootstrap site by adjusting just a few color definitions.
- Achshar 14y ago
  > you're expected to run the compiler once to generate a single static, minified CSS file. Yes, i stand corrected on that, i don't use them but that is not an excuse for ignorance. Plus compiling once makes more sense than compiling every time. I also use webkit's web inspector for making live changes to a stylesheet and then saving the file in the end, very convenient compared to the changing-saving-uploading-refreshing cycle. Also it is another barrier to entry for my open source project. (someone has to know all the compiling process to contribute) And as for uses of compilers, with CSS variables at the horizon (already functional in chrome canary IIRC) and other than this vendor prefixing problem (which everyone knows is very real and seeing the rapid release cycles of all major browsers now days, it is not far fetched to see a solution being cooked up some time soon) compilers don't have much to tackle. The cost v/s return ratio will reduce and probably even be negative in near future (if not already). The cost is of compiling every time during development and once every time production code changes. I don't know about you, but if i am not live editing css in web inspector, i make a ton of very small changes to CSS and try them out one by one by refreshing the page. Not a great experience if i have to go to command line every time i change a byte. > Efficiently combining multiple source files. This problem can only arise in very big projects and if your project is in that category then there are all sorts of solutions available. (including writing your own compiler) But if that problem exists in a small or even middle sized project, them i believe, the solution is not the compiler but to re-factor the code base to use less files or merging them.
  - wheels 14y ago
    > Not a great experience if i have to go to command line every time i change a byte. That's why, as was already mentioned, you generate them on the fly during development and generate them statically for production. That way you change the file on the file in your editor and it's updated immediately in your dev environment, but there's zero overhead in production.
  - Sottilde 14y ago
    The most elegant way to handle this (IMO) is to use a combination of Compass(http://compass-style.org/ http://compass-style.org/) and Vogue(http://aboutcode.net/vogue/ http://aboutcode.net/vogue/). Compass has a great command line feature called "watch" that simply watches for file system events (linux, os x) or polls (windows) your folders for changes and recompiles your stylesheets. Vogue detects stylesheet changes right away and reloads them in your page via WebSockets. Instead of dealing with Chrome's inspector, making changes, then copying them to your CSS (and translating if you like SASS), I simply make changes in my editor on one monitor while watching my site on the other monitor. The overhead is minimal - I see changes within about 500ms. Compass is great even just as a build tool, and I used it before I learned SASS. It's fantastic for its simple mixins like linear-gradient and even better when you start chaining them together. One of my favorite mixins I use throughout my code: @mixin buttonGradient($color){ @include basicBackgroundGradient($color); &:hover, &.hover{ @include basicBackgroundGradient(hover-color($color)); } &:active, &.active{ @include basicBackgroundGradient(active-color($color)); } } @mixin basicBackgroundGradient($color, $percent:12%){ background: $color; @include background-image(linear-gradient($color, darken($color, $percent))); } Then, anywhere I want a green button to be created, I use the style @include buttonGradient(green);. Or any color. Keeping a stylesheet full of site-wide colors is incredibly useful and being able to modify them via functions like darker() and lighter() really saves time. Consider that this simple include actually generates 18 lines of CSS each time I invoke it - in the words of an old boss, now you're really cookin with gas.
Natsu 14y ago
> The CSS compilers really dont make much sense to me. CSS doesn't have variables. I can change my site's color scheme by changing just a few variables. (And I need to, too, because I'm not exactly great at picking them out in the first place...)

by Achshar 14y ago

TazeTSchnitzel 14y ago

What request overhead? I thought people used them when developing and pushed the compiled result to the server. And I love JS too, but I use CoffeeScript since it's basically syntactic sugar for JS that saves me some keystrokes and makes my code more readable.

Achshar 14y ago
> I thought people used them when developing and pushed the compiled result to the server. Oh well, i see, that makes sense, but as i said i don't use them so i don't know very much about them. I probably should use them once just for the sake of checking them out. And coffeescript too. Thanks!

duskwuff 14y ago

If you're running the LESS compiler on every request, you're doing it wrong. Doing that might make sense in development, but for deployment you're expected to run the compiler once to generate a single static, minified CSS file. Same as JS compilers/minifiers in that respect. As far as what these compilers do? Yes, CSS is nice enough as it is; that's why these compilers don't mess with the syntax too much. Most of what they're useful for is acting as a macro preprocessor (so you can use @color macros and automatically generate vendor prefixes, for instance), as well as for efficiently combining multiple source files. If you're not familiar with how useful CSS compilers like LESS can be, I'd highly recommend that you take a look at Twitter Bootstrap. They use the macro-processing features pretty heavily, and to impressive effect. For instance, most of the colors in a Bootstrap site are configured in variables.less -- including light/dark color variants! -- so you can change around the whole color scheme of a Bootstrap site by adjusting just a few color definitions.

Achshar 14y ago
> you're expected to run the compiler once to generate a single static, minified CSS file. Yes, i stand corrected on that, i don't use them but that is not an excuse for ignorance. Plus compiling once makes more sense than compiling every time. I also use webkit's web inspector for making live changes to a stylesheet and then saving the file in the end, very convenient compared to the changing-saving-uploading-refreshing cycle. Also it is another barrier to entry for my open source project. (someone has to know all the compiling process to contribute) And as for uses of compilers, with CSS variables at the horizon (already functional in chrome canary IIRC) and other than this vendor prefixing problem (which everyone knows is very real and seeing the rapid release cycles of all major browsers now days, it is not far fetched to see a solution being cooked up some time soon) compilers don't have much to tackle. The cost v/s return ratio will reduce and probably even be negative in near future (if not already). The cost is of compiling every time during development and once every time production code changes. I don't know about you, but if i am not live editing css in web inspector, i make a ton of very small changes to CSS and try them out one by one by refreshing the page. Not a great experience if i have to go to command line every time i change a byte. > Efficiently combining multiple source files. This problem can only arise in very big projects and if your project is in that category then there are all sorts of solutions available. (including writing your own compiler) But if that problem exists in a small or even middle sized project, them i believe, the solution is not the compiler but to re-factor the code base to use less files or merging them.
- wheels 14y ago
  > Not a great experience if i have to go to command line every time i change a byte. That's why, as was already mentioned, you generate them on the fly during development and generate them statically for production. That way you change the file on the file in your editor and it's updated immediately in your dev environment, but there's zero overhead in production.
- Sottilde 14y ago
  The most elegant way to handle this (IMO) is to use a combination of Compass(http://compass-style.org/ http://compass-style.org/) and Vogue(http://aboutcode.net/vogue/ http://aboutcode.net/vogue/). Compass has a great command line feature called "watch" that simply watches for file system events (linux, os x) or polls (windows) your folders for changes and recompiles your stylesheets. Vogue detects stylesheet changes right away and reloads them in your page via WebSockets. Instead of dealing with Chrome's inspector, making changes, then copying them to your CSS (and translating if you like SASS), I simply make changes in my editor on one monitor while watching my site on the other monitor. The overhead is minimal - I see changes within about 500ms. Compass is great even just as a build tool, and I used it before I learned SASS. It's fantastic for its simple mixins like linear-gradient and even better when you start chaining them together. One of my favorite mixins I use throughout my code: @mixin buttonGradient($color){ @include basicBackgroundGradient($color); &:hover, &.hover{ @include basicBackgroundGradient(hover-color($color)); } &:active, &.active{ @include basicBackgroundGradient(active-color($color)); } } @mixin basicBackgroundGradient($color, $percent:12%){ background: $color; @include background-image(linear-gradient($color, darken($color, $percent))); } Then, anywhere I want a green button to be created, I use the style @include buttonGradient(green);. Or any color. Keeping a stylesheet full of site-wide colors is incredibly useful and being able to modify them via functions like darker() and lighter() really saves time. Consider that this simple include actually generates 18 lines of CSS each time I invoke it - in the words of an old boss, now you're really cookin with gas.

Natsu 14y ago

> The CSS compilers really dont make much sense to me. CSS doesn't have variables. I can change my site's color scheme by changing just a few variables. (And I need to, too, because I'm not exactly great at picking them out in the first place...)