Should I write HTML or CSS first?

You should write first whatever suits your workflow.

I think writing HTML first is the way to go, for the benefit of progressive enhancement, accessibility, SEO:

A barebones HTML document is the lowest level which you can enhance. It is the level of Lynx browsers, screenreaders and formerly search engines. So start with a properly structured HTML document. Then enhance it with CSS and then JS.

If CSS fails to load you will still present a readable document (not littered with iFrames or abusing elements for styling (like header tags)). You will instantly spot where to place skip-links, or skip to content links. You can focus on putting the most relevant content in the first 100 or so words in the HTML document. Writing HTML and then CSS first will ensure in most cases that you won't use JavaScript for layout. You also won't hide content with "display: none", if you want collapsible content, you'll enhance it with JavaScript, and add "display:none" after the page has loaded.

Even if you use a CSS/grid framework, that shouldn't hamper writing the HTML first. You can always add the <div class="row"> later on. Or decide to write your own grid, since the website only uses 4 sizes of columns and a 100kb CSS file is a bit overkill.

In my opinion good design follows from the content. Don't try to strongarm content in a design.

Not trying to troll, but "I am not able rightly to apprehend the kind of confusion of ideas that could provoke such a question." [1]

Why/How would anyone write CSS before HTML?

1: http://www.brainyquote.com/quotes/quotes/c/charlesbab141832....

There are two orthogonal issues at hand here.

1) How do i build a site that serves my needs? 2) How do i learn to build a website?

Those are two very different tasks can (and often do) require different potentially conflicting approaches.

If you are familiar with the skills, technologies, and requirements of a project, one starts with a discussion about the needs of a site, and go through design exercises in order to determine what it is that needs to be implemented. That often means markups and design stuff, which will often have nothing to do with either HTML or CSS (although some people do mockup with HTML & CSS).

If you are trying to learn how to build a site, while also building a site, there is a process of exploration and learning that you must engage in before you know what is even possible to build.

This is where a modular and iterative design and build strategy has become popular. When you don't necessarily know where you're going with your end product (because you don't know what's possible), you build small chunks of functionality, experiment with whether it meets your requirements, and then incorporate that smaller experiment into the larger whole.

So, what does that actually mean in concrete terms? Building a site can be like building a house, where you draw up architectural plans (design mockups) and then start doing the engineering to calculate whether your house will stand up and meet your aesthetic needs. But building a site can (and often should) look more like building a series of small experiments, and taking a step by step approach to reaching a product that meets your original concept.

As a very practical matter, almost everyone futzes with both their HTML and their CSS at the same time.

You should write tests first.

I expect the "best" answer depends on what kind of page you're building. For example, is this a a stand-alone web page, one page of a one-off site, part of a CMS where templates are used for common patterns, part of a full-blown web application with lots of interaction and every page unique? Will the content be static, generated from a DB on the server, generated dynamically on the client side? Are you designing alone or collaborating with others? Do different people have different roles on the project?

With that said, I typically develop HTML, CSS and even JS in parallel. I try to have a fair idea of what my information architecture, content, layout, visual style and interaction design are before I start, and then treat it somewhat like a software project: start by writing a high-level outline HTML page structure and the CSS to set up the layout and basic presentation style, then add more detailed HTML and CSS for each part of the page, and iterate in increasing levels of detail until I'm somewhere near done. At any point, I might step back and refine/replace something from earlier with something more flexible or generalised, particularly with CSS as the recurring patterns for the page start to become clear.

html