CSS Workflow/Tools

[Geldon]

I am getting back into using CSS after not having used it for something like 6-8 years. So I am very out of date. While I catch up on the new CSS abilities, I am also concerned with efficiently using and testing my CSS.

So what is a good CSS workflow? What are the must have CSS tools? Do people still use Firebug, or is there another tool on the block? The Web Developer Toolbar? What are the best tools for Chrome? Is there finally a way I can edit CSS and see my changes immediately without a page refresh, and also save the resulting CSS? Are there specific CSS IDE’s or text editors out there?

A lot of questions, and I wouldn’t mind having any elaboration or suggestions outside the scope of the questions you might want to lay on me, either.

[Paul Sullivan]

http://www.sublimetext.com/
Sublime Text is one of the most awesome text editors I’ve used. Most would agree. If you’re not using it already, go get it. ;) (Be sure and check out the maaaany packages available!)

https://developer.chrome.com/devtools/docs/mobile-emulation
The developer tools for Chrome are pretty extensive. I’m not going to name each and every tool, but the mobile emulation is the most fun for me. (Outside the normal tools like load times and element inspecting, of course.)

https://chrome.google.com/webstore/detail/livepage/pilnojpmdoofaelbinaeodfpjheijkbh?hl=en
Live Page has been one of my favorite Chrome extensions lately. It will watch urls as well as local files for any changes and update the page accordingly. There are some very minor hiccups while using it, but they are easy to overlook.

While you’re in the Chrome store, also do a search for “Page Ruler”. It’s basically just a pixel ruler for the browser.

And the best for last… (In my opinion)

http://sass-lang.com/
Sass is a CSS preprocessor that that makes it more like an actual programming language. It simply makes the work flow so much more efficient.

[Geldon]

Thanks for the links and comments.

I will look into the Chrome things you mentioned. LivePage looks especially interesting.

From what you mentioned, it seems that Firefox is not used as much as Chrome. Is Chrome the generally favored browser for testing/development now? (I know you have to use other browsers at least to make sure things look OK in them, but not necessarily as a primary development environment.)

[nixnerd]

Is Chrome the generally favored browser for testing/development now?

Nope. Not for me. I love Firefox about 100 times more than Chrome. It renders fonts MUCH better and has MUCH smoother animations and scrolling. Plus, I like all the extensions in the Mozilla ecosystem.

Want to know a funny little fact? Chromium, which is basically the test version of Chrome is the single LARGEST software package on my entire system. There’s nothing that even comes close to it’s bloat.

Sublime Text is awesome. It works great with the Live Reload plugin. I would also recommend getting SASS and Compass installed as quickly as possible. Also, I would use Git for version control. Also, learn to use your terminal/CLI. That comes in handy daily.

[Author]

Posts