How can I improve my CSS + HTML workflow?

I am a LAMP developer, but also advancing in CSS / HTML. The problem is that my workflow in this area really suffers from redundant and tedious tasks. There must be a better way. Currently, I start with user interface design, and then:

  • I am writing HTML
  • Open UPDATED Firefox Web Developer Add-on "Web Developer" Live CSS Editor and
  • Firebug CSS + HTML Inspector.
  • I customize the styles in Firebug and then transfer them to the web developer editor (tedious!)
  • Then, every few iterations, I copy ENTIRE CSS from Web Developer to my text editor, save and reload the Firefox web page.

This process is fine, and it works for me, but it takes so much switching windows and copying style information from one application to another (Firebug for a web developer). I could just type everything manually in a web developer (which I sometimes do), but Firebug gives you the ability to use the up / down arrows to adjust pixel parameters and automatically fill in CSS keyword names. It seems like a hybrid of two tools would be the ideal tool, but I have not come across anything like that.

I am looking for offers.

+4
source share
4 answers

Try JetBrains WebStorm and its XFire CSS plugin for Firefox and Chrome. After you try, you will never return.

+1
source

I personally use FlawLESS . I placed my text editor (which should support CSS very well) and my browser side by side and you will immediately see the changes.

0
source

I don’t think you need to use Firebug and Web Developer to edit live css. You can do both from firebug, just click on the css tab and click "Edit." Usually I don’t even try to change the firebug css edit panel. I use the stylesheet, and every time I make a setting, I am pleased that I placed it correctly in the real css file.

0
source

Have you studied using something like git? Recently, A List Apart has been a pretty good beginner to beginners: Getting started with Git .

With version control, you can simply work locally, and your last stable code on a real site is always in a few clicks.

0
source

All Articles