What things can make css development faster?

Question

Thing which I use

* stylesheets
      o project.css
      o ie.css
      o print.css
      o reset.css

• CSS Frame generator
• readymade collection of useful css classes
• Edit CSS option of Web developer toolbar because it shows live preview
• Firebug
• Css type set
• CSS Sprite Generator
• Troubleshooting with <base>
• Online CSS Editor to test styles
• HTML Table Code Generator
• Dynamic Dummy Image Generator
• PxtoEm converter
• MRI
• CSS Redundancy Checker
• CSS Readibility
• CSS-Tricks.com's snippet collection
• http://html-ipsum.com/
• CSS Color Converter
• Debug CSS
• CSS Tidy online
• Form Style Generator

Any other tips?

Answer 1

If you have to ask this question you surely shouldn't be working on coding the CSS to fit the design mockups in front of you. That's my humble opinion.

BTW: This was in response to the original phrasing of your question: "How should I start coding CSS for the design mockups in front of me."

Answer 2

EDIT:

In response to your update - I personally favor Firebugs CSS edit/preview/modify over WDT's. Its a lot more direct IMO.

IMO this is in general a bad practice. While the goal is to seperate the structure (xhtml) from the presentation (CSS) this is sometimes not completely possible for example having to wrap an element with several other elements so the design team can have drop shadows and rounded corners and the development team can have felxible height and width...

Anyhow the easiest thing to do is just start applying your styles to the elements... i dont understand what kind of pointers youre looking for - it might help if you give a quick overview of your current process.

Answer 3

Use a proper IDE that gives you as much help as possible.

Intellij IDEA is not only a great Java IDE, it is also great for HTML/CSS editing:

• CSS editor
• CSS code completion
• CSS syntax & error highlighting
• CSS on-the-fly validation & intention actions
• Find/highlight usages
• Quick doc
• CSS Code Folding
• CSS Code formatting
• CSS Structure view
• Refactoring
• Auto-comment
• Goto declaration
• Show Content

See more here: http://www.jetbrains.com/idea/features/html_css_editor.html

Answer 4

I would recommend a framework like the 960 Grid System. Creating nice layouts and functional prototypes is done very quickly when you've got 960 within reach.

Answer 5

You could try using something like Sass

Answer 6

using tables for layout

Answer 7

Experience, experience and once again - experience.

You may find helpful IDEs, generators etc. but in the end of the day, if you're a developer, your experience plays the most important role.

Answer 8

There are certain templating systems such as sass, that can work well on certain designs or large stylesheets.

If your designs are repetitive as in they always stick to certain convetions, you can try a css framework.

However, despite limited crossbrowser support, CSS is trivial (including IE6 after a certain amount of experience). You can try to combine templating systems, or so called css frameworks but take in mind that sometimes less is more.

Answer 9

scaffold will allow you to build your CSS in conceptual manner...