I’m curious how other developers are coding their pages: do you write your HTML or your CSS first when mocking up new page content? What do you feel are the benefits of your approach?
I traditionally am given a design to code, and write the mark-up HTML first. I then start coding my CSS. It will get to a point where I need to quickly tweak individual elements, and I’ll start coding in-line instead in the .css file. At the end, I would clean up my in-line styles and find where I can put them in the stylesheet to keep order.
I’m considering moving to a more test-driven development approach, where I mock all of my CSS first, then code the mark-up. The thought is I will iron out all of my CSS first, and by defining how the CSS functions, will have essentially already written all of my mark-up structure. So coding the HTML is the easy part.
Thoughts on your current approach and my proposed “CSS-driven development?”
How are you going to float the walls in mid-air until you build the foundations that they sit on? How can you write CSS to style your page until you have the HTML tags written that you are applying the styles to.
Each piece of CSS is styling specific HTML tags. Those tags need to exist in order to be able to style them. If you have no HTML to style then the CSS file should be empty as any styles in it are redundant as they don’t actually style anything.
Using your analogy, felgall, how do you build a house with no blueprints? I would argue the opposite: CSS is the actual blueprint of the site. CSS both defines how far apart your walls are (layout/positioning), and paints the walls different colors (text/styling.)
Writing the CSS first lays out how your mark-up will be structured.
I assume that when you set out to create a page, you have an idea in your head or in a Photoshop mock-up of what your page should look like as a finished product.
If you are building an entire layout, you might write the CSS for your container, header and footer–your general content areas. Then write the mark-up. The mark-up is then easier to write, because you’ve already defined how it is structured in your CSS. You then proceed with writing the CSS for your header/navigation, then code the HTML. Then the CSS for your body content, write the HTML. Until all your content areas are done.
So, we can tally 1 for “HTML first” from felgall.
The point is to define how your HTML will be structured without writing it yet. Again, like TDD in software development, where your tests define the functionality/API of your classes before you write them. Once you lay the foundation for what they do and how it’s structured, doing the actual coding is the easy part.
I do the html first, then the .css. Though I never start from scratch. I have a few templates I’ve created that I choose from when I start a new layout. Mainly just the structure. Then I change it to meet the needs of the mockup (.psd, .png) that I’m working with.
I usually have a mental picture of what the page will look like and I write the css and html at the same time. That is, I am positioning and defining dimensions in the css for the html as I am writing it. I work my css as an internal stylesheet while writing the code so I am just scrolling between the css and html. After that the css gets pulled out and linked to as an external stylesheet.
My css flows in the same order as my html which makes locating styles later very easy. It is no fun debugging someone elses css when they have styles scattered all over the place in no particular order.
[ot]@liangningtai if those links are to your sites. I would recommend you add them to your signature. Though I am not sure you have enough posts to have a signature yet. If not I would refrain from adding them to the end of your posts, until you have reach the required # of posts.
Also, another point to make is that beginners or those not experienced should write pages in sections, check each browser for compatibility issues, validate, and if there are any you won’t have a massive page to debugg at the end of the coding :).
I’m not the expert that some of the posters in this thread are, but this is the way I do it. However, if you want to get technical, I have a really basic, bare-bones HTML layout that I use as the “foundation” of whatever site I’m designing. So I guess I start with the HTML first.
That is the same approach I take also, but I will sometimes do them 2 or 3 at a time rather than just one.
That’s easy, if your the one building the page you know what your going to need and where your going to be needing it. It’s not hard to look 2 or 3 steps ahead.
It was compared to building a house earlier in the thread so I’ll expand on that a little.
It is the same principle as buying pre-cut studs when you are framing a house (you know exactly what you will be needing). Pre-cut studs for an 8’ wall come cut at 92.5’’ from the lumber yard. You get 2 top plates on top of the studs and 1 bottom plate which anchors to the foundation. The plates are just 2x4’s (1.5 x3.5) layed flat. The total thickness of 3 - 2x4’s is 4.5" then you add 92.5" for your stud length and you get a wall that is 97" tall. Eight foot is actually 96" so the extra inch on the wall height is to allow for sheetrock clearance. The sheetrock on a residential home here in the U.S. is .5’’ thick. The sheetrock goes up on the ceiling first and then an 8ft. sheet goes on the wall after that and stays .5" above the foundation for protection against water damage should there be plumbing problems.
It is just a basic principle of looking ahead and knowing what you will be needing before you get there. Hope ya’ll enjoyed my little lesson on saving time with pre-cut studs.
It’s like developing ‘content’ before you build the site. Why build a website with no content for telling your users why you built that website. At the end your just going to be faced with looking at a blank screen with pretty graphics on your design.
Of course if the designer is creating a site for someone else then the content may not be delivered until later in the process. You’d therefore have to work with some dummy content and hope that it isn’t too different from the real content once you receive it.
