views:

66

answers:

3

Hi,

So I'm starting to get fairly proficient at coding my site(s). But I'd like to take some meta-steps and begin to get down best practices and workflow kind of stuff. And I was wondering, I've heard that it is always important to finish html markup before adding css. Does this extend farther? I'd think that the order would be something like html>css>server-side>client-side. Is this right or is there some better way.

Thanks guys

+4  A: 

I think that there is no hard and fast way to do this, it's an iterative process. Depending on the server side technology that you use, some of what you may wish to do might restrict your options from an html point of view.

In general, I fire together a simple form and wire up the server side code. It's usually relatively trivial to then make the form look as you wish.

Paddy
Fosco
+2  A: 

There is no such thing as right order.

Daniel Moura
+1  A: 

I would specifically recommend not trying to finish all of your markup before you start adding in CSS and/or Javascript.

The reason is pretty simple: CSS and JS both interact with your page based on the elements and selectors you define in your markup. So if you have a vision in your head for how you're going to lay out a page, you can imagine how the markup should be (and often you'll be pretty close), but you'll find that when you actually hook CSS or JS to it there are things that don't work exactly as you had expected them to.

At this point you often need to refine your markup to get the elements and selectors set up in such a way that the CSS or JS does behave how you'd like it to.

Dealing with this is much easier when your code is leaner. If you think you've already finished your markup 100% and then you slap your CSS on top and something looks funny, you may have to spend a lot longer hunting for the exact cause of the problem and rewriting big chunks of markup than you would have spent doing it incrementally.

So, I would recommend your workflow be more "big picture" -> "details."

Start with a basic wireframe of your site and just put enough CSS in there to see that all the major sections of your page are sized and positioned as you'd expect. Then begin to layer in content and presentation at the block level, then move in and polish out the details.

Core functionality should come before you worry too much about presentational elements, but big picture layout and interactivity (which is more than just markup) should come before detailed content.

Hope that makes sense. Of course, the most important thing is to find a workflow that helps you to be as efficient as possible, so try different approaches and find the pattern that's "just right" for the way you think.

Andrew