Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Why bother with a CSS build process?

lucidchart.com

Post reply on HN
Print view View original

21–30 of 39 posts

Re: Why bother with a CSS build process?

#21

Post by twistedpair »

acabal wrote: post #13

I disagree with the first point, the spirit of the web is to be open. The other points do make sense though. On a side note, I'd really like to use LESS or an equivalent, but the way I design/develop (and I'm an admittedly bad designer) is to tweak things in CSS, alt-tab, refresh the browser, and see the changes instantly. Likewise I can open up Firebug and tweak some style to see how it would look, then apply that c…

Checkout GWT (Java... hiss, boo!). It's had automation of all of these best practices and more (inline images, data/urls, class obfuscation, classname compilation, minification/gzipping, browser specific permutations) since before any of these new CSS frameworks (LESS, SASS) existed. If you're already using Java, check it out.

To the refresh speed, with something like GWT these are only done on your final build, not during development. Certainly such a DevMode could be achieved in other frameworks as well. :)

Re: Why bother with a CSS build process?

#22

Post by aaronholbrook »

acabal wrote: post #13

I disagree with the first point, the spirit of the web is to be open. The other points do make sense though. On a side note, I'd really like to use LESS or an equivalent, but the way I design/develop (and I'm an admittedly bad designer) is to tweak things in CSS, alt-tab, refresh the browser, and see the changes instantly. Likewise I can open up Firebug and tweak some style to see how it would look, then apply that c…

Check out [1]codekit. It watches and automatically compiles your LESS/SASS on save and will even refresh your browser for you.

[1]: http://incident57.com/codekit/

Re: Why bother with a CSS build process?

#23

Post by sophacles »

moron4hire wrote: post #17

CSS so complex you need a compiler translator (these things aren't compilers) is doing CSS wrong.

I think this ignores the other benefits of things like LESS, SASS, etc. For instance, the variable notion for css. Now a change to a named color requires a single place of change - the definition of that color, not each and every place it is used. Similarly, any place you have to have a half a dozen -browser-specific-properties can be replaced with a single "function". These are nice features.

Re: Why bother with a CSS build process?

#24

Post by randomdrake »

hcarvalhoalves wrote: post #20
acabal wrote: post #13

I disagree with the first point, the spirit of the web is to be open. The other points do make sense though. On a side note, I'd really like to use LESS or an equivalent, but the way I design/develop (and I'm an admittedly bad designer) is to tweak things in CSS, alt-tab, refresh the browser, and see the changes instantly. Likewise I can open up Firebug and tweak some style to see how it would look, then apply that c…

Include less.js while developing and it will compile LESS on the fly [1]. Then you just have to compile/minify the LESS files into CSS when you build your project and push to the server. [1] http://lesscss.org

This is the best way to do it.

It's pretty much the same workflow. I transitioned to this and found it pretty painless (no pun intended). Instead of changing CSS every time, you're changing your LESS stuff. Then, when you're ready to deploy, compile it and push it out.

Re: Why bother with a CSS build process?

#25

Post by t0f3rchr15 »

Another way to cut down on overhead is in the php for loops. If the page has many images to load, the size of the array will be large and sizeof() will be called every iteration of the loop. Instead, use for($m = 0, $mm = sizeof(array); $m http://php.net/manual/en/function.sizeof.php

Re: Why bother with a CSS build process?

#26

Post by aleem »

acabal wrote: post #13

I disagree with the first point, the spirit of the web is to be open. The other points do make sense though. On a side note, I'd really like to use LESS or an equivalent, but the way I design/develop (and I'm an admittedly bad designer) is to tweak things in CSS, alt-tab, refresh the browser, and see the changes instantly. Likewise I can open up Firebug and tweak some style to see how it would look, then apply that c…

The "edit styles" bookmarklet is a huge time saver. It's a live CSS editor. I usually tweak the styles in there then move them over to the CSS file when done.

Re: Why bother with a CSS build process?

#27

Post by steveax »

acabal wrote: post #13

I disagree with the first point, the spirit of the web is to be open. The other points do make sense though. On a side note, I'd really like to use LESS or an equivalent, but the way I design/develop (and I'm an admittedly bad designer) is to tweak things in CSS, alt-tab, refresh the browser, and see the changes instantly. Likewise I can open up Firebug and tweak some style to see how it would look, then apply that c…

Yeah, the first point is silly. It's trivial to run minified CSS through a prettifier. As for workflow, pretty much all the CSS meta languages have some sort of auto compiling upon modification and you can skip the alt-tab (assuming you've got enough monitor space to see the browser window and your editor - and if you don't, you should fix that) and refresh by using LiveReload. As for tweaking the styles in the browser, never really understood that, but Chrome has (experimental) support for Sass source maps so you can see where the styles came from in the Sass file directly.

Re: Why bother with a CSS build process?

#28

Post by mnicole »

zalew wrote: post #12
stringham wrote: post #2

1. You are exposing your source code to anyone who might be interested. I think that exposing your CSS source code with comments etc is more beneficial than detrimental. It helps us have a more open web and fosters an environment for new developers to learn from what's already great. However, the overhead of always sending down the full CSS probably isn't worth it since so few people are actually interested. http://d…

who needs reading a css file when you can inspect the rules in firebug and such, handpick them and even edit live? I can't remember when I opened one's css file from source.

If you're not checking their respective boxes in the inspector, you can miss certain states and pseudo selectors. I also try to add .less and .sass/.scss to the end of stylesheets just to see if the working file is on the server too, since it can be easier to read.

Re: Why bother with a CSS build process?

#29

Post by moron4hire »

sophacles wrote: post #23
moron4hire wrote: post #17

CSS so complex you need a compiler translator (these things aren't compilers) is doing CSS wrong.

I think this ignores the other benefits of things like LESS, SASS, etc. For instance, the variable notion for css. Now a change to a named color requires a single place of change - the definition of that color, not each and every place it is used. Similarly, any place you have to have a half a dozen -browser-specific-properties can be replaced with a single "function". These are nice features.

CSS has a mechanism for defining rules in such a way to abrogate the need for variables. I see far too many people using CSS classes to refer to one or only a handful of things, by a strict hierarchy of the layout of their page. In that case, you're almost always going to run into problems with extremely verbose CSS that repeats itself. But it's completely wrong, it's not how CSS is supposed to be done.

If you need a bunch of objects to, say, have the same background color, that's why you can chain selectors. Your common background color would then only be defined in one place.

CSS doesn't have to be complex to get complex results. I would call a CSS file any longer than 200 lines a bad code smell.

As for browser-specific rules, in my mind they just plain don't exist. Add in an intelligent reset rule-set at the beginning of the file (and no, not one that destroys the margin, padding, and display rules of every single element, but only resets things as needed) then you can easily make completely cross-browser UIs.

Re: Why bother with a CSS build process?

#30

Post by 2mur »

acabal wrote: post #13

I disagree with the first point, the spirit of the web is to be open. The other points do make sense though. On a side note, I'd really like to use LESS or an equivalent, but the way I design/develop (and I'm an admittedly bad designer) is to tweak things in CSS, alt-tab, refresh the browser, and see the changes instantly. Likewise I can open up Firebug and tweak some style to see how it would look, then apply that c…

Stylus also has a --watch flag and will rebuild on the fly.
Post reply on HN