Since I’ve started using WordPress as my choice platform for web development, I’ve been “modularizing” my development system. What does this mean? In the past, I would haphazardly make a half-cocked plan of action and get to work immediately.
Now I load the chamber with strategic bullets that allow me to get going…faster.
Frameworks and Modules
Modularize your CSS by using a framework (I like Blueprint), a reset.css, and make a general CSS file where you keep commonly used snippets. I often found myself referencing code from a site I built because I remember a technique I used there. Now I have a “cssmodules.css” file that holds neatly commented snippets to style bullets, link, comments and much more.
Keep the best, ditch the rest
All graphics are not icons
Modularize popular files and their types. All graphics are not the same type. For instance, keep all icons in a folder called “Icons” and all textures in a folder called “textures”; all patterns in a folder called patterns. I have an entire folder of “working .PSDs”. You get it.
Take a moment to define the color classes in your CSS file, somewhere near the top. Chances are you will be using these for a lot of things – rollover colors, borders, fonts, etc. Not all of us can remember the hex code for light blue after all. It’s much easier to remember a class name of “ltblue” however.
Just do it. I don’t but I should (and will). It would really save a lot of time and frustration.
That’s all I can think of for now. Do you have any tips you want to share about how to streamline your development process?