

Should I write HTML or CSS first? - dynamic99
http://programmers.stackexchange.com/questions/179537/should-i-write-html-or-css-first

======
blauwbilgorgel
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.

~~~
TomGullen
Writing CSS first seems very counter intuitive. I don't even know how I'd go
about doing it.

The best web design pattern in my opinion is progressive enhancement. For me,
this is HTML followed by CSS.

------
rustc
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....](http://www.brainyquote.com/quotes/quotes/c/charlesbab141832.html)

~~~
wnewman
For most web text I heartily agree with your quote. But in some cases, e.g., a
large family of pages which are to share nontrivial layout (perhaps one page
documenting each function in a software library, with standardized formatting
for the arglist, the preconditions and postconditions, one or more usage
examples...) it might be appropriate to get the shared organization/layout
decisions straight before trying to compose much of the text.

------
knowtheory
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.

------
iracic
You should write tests first.

~~~
MalphasWats
Good grief, tests for HTML! Some people will do anything to get out of doing
real work!

------
Silhouette
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.

------
n0mad01
html

