Web design process with CSS - during or after?

Which is the better practice?

Add CSS during web designing you can see the result (or close) as early as possible and make required changes. You also know how many divs or spans you might need (eg to make curved cross-browser hover background). But as you add more and more components to the page sometimes things get hack-ish a开发者_StackOverflow社区s you need to patch here and there to get the exact design required.

Add CSS after finishing page design you can see the page overall structure as it is well, without styles. You get to see how accessible your site is, and modify it right away if it's not good enough (unlike the former case where you may break multiple CSS rules). Plus after you finished it, you only need to spend most of the time to alter only the CSS file, which is good to get the momentum going.

Granted I have never tried the latter approach, but am seriously considering it for my next project if I can see convincing reasons -- or if it's no good at all.

Thanks.

I'm kind of confused at the angle you're coming from to ask this sort of question.

Generally, the actual design is done on paper or in an app like Photoshop or Illustrator. The process of turning that design into HTML/CSS comes afterwards. Identify your main content areas, and put them as divs on the page. Get some basic CSS in place to get the basic structure working. Then start adding wrapper divs and other page elements as needed, to get the HTML version looking like the on-paper design.

(Definitely not all designers follow this process -- eg, your typical graphic (not web) designer is going to add slices and do an "export to HTML" from photoshop, which will generate some horrible non-maintainable HTML).

The nice thing about this, is if you're coming from the other angle as a developer, you can just do the bare minimum HTML - identifying your main content areas (such as the main body, some navigation, a box showing who is logged in, etc) and making those divs. Then when the design is added, it's a matter of adding the right CSS and adding extra elements as needed to the HTML.

You're talking as if you're doing the creative design process with HTML. This frankly, is the wrong way to go about it. Pencil and paper goes a LONG way. Also, if you're a developer, get a designer. Really. There are very few people that can do both. I know a lot of developers that THINK they can design because they know how to write HTML and use Photoshop -- but really, they can't.

I've always preferred the wireframe approach. You start your site by laying out the basic skeleton, you can use CSS here to get your columns or content sections roughly sketched out. After that you then move to populating the function/data/content of the site. You make sure you have the required markup to fit your content. Once you've got the content you need you can then begin applying your theme to it.

This sort of back and forth gives you a good canvas to work from. You can see some of the basic building blocks but aren't stuck in a specific structure. Applying your CSS at the end should work with the markup and be less "hacky" as you put it.

I think a big problem with second approach is that you'd seriously scare the "business" with every demo!

Even if the functionality is there, and you tell them the style will be added later they could lose confidence.

On this point alone I think a certain level of CSS is required from the beginning.

This assumes the project is commercial with business sponsors, otherwise I see less problems with the second approach.

What I do is to start adding CSS towards the end of the structuring process, mainly for layout. Those kind of styles will be margins, paddings or sometimes font size. When the structure is finished, progressive enhancement can be done to polish the design.