0

I have a feeling that this is a subjective question, but perhaps there's something somewhere on the interwebs that has attempted to standardize this already and I'm just not aware of it (but someone else who will post here is).

Just a note: Please disregard any errors or omitted element attributes as I'm looking for suggestions solely regarding the authoring of the .css file itself. Both methods work. However, I personally prefer .css B as it seems more correct, but maintenance can be a pain if you're working with nested divs whos parents change class names.

Let's say I have a simple form on a page contained inside a div container. The form has two three fields: two input text boxes and one textarea (from, subject and message).

Which would be the more "semantically correct" CSS to accompany the following form:

<div id="contact">
<form action="/index.php/forms/contact" method="POST">
    <label for="txt_replyto">From:</label><input type="text" id="txt_replyto"></input>
    <label for="txt_replyto">Subject:</label><input type="text" id="txt_subject"></input>
    <label for="txt_replyto">Message:</label><textarea id="txt_msg"></textarea>
</form>

(.css A)

<style>
div#contact    { width: 350px; }
div#contact form   { width: 100%; }
div#contact label { float: left; width: 20%; text-align: right; }
div#contact input   { margin-left: 1%; width: 79%; float: left; }
div#contact textarea { margin-left: 1%; width: 79%; float: left; }
</style>

or

(.css B)

<style>
div#contact      { width: 350px; }
div#contact form     { width: 100%; }
div#contact form label  { float: left; width: 20%; text-align: right; }
div#contact form input    { margin-left: 1%; width: 79%; float: left; }
div#contact form textarea  { margin-left: 1%; width: 79%; float: left; }
</style>

Are there any pre-defined standards for this sort of thing (Google'ing it didn't yield much), or is it solely personal preference?

Edit: Thar. Updated based on Jack's reminder :)

Demian Brecht
  • 21,135
  • 5
  • 42
  • 46
  • 3
    Is there a reason you're not using the actual label element? http://www.w3.org/TR/html401/interact/forms.html#h-17.9 – JackCA Jan 11 '11 at 03:08
  • Other than forgetting that it was there? ;) Nope. Will be changing that though. – Demian Brecht Jan 11 '11 at 03:11
  • 1
    Personally, I would also give the form its own id and then use that in the css ala form#contact. If you do those two changes it would completely reconstruct your question and setup, but it may look better. – JackCA Jan 11 '11 at 03:17
  • Agreed, and good suggestion. However, I'm more after semantics when it comes to nested elements (perhaps my question should have clarified that a little more). Thanks though :) – Demian Brecht Jan 11 '11 at 03:19

2 Answers2

1

Maybe I'm being too philosophical, but if both stylesheets produce the same result, then they're semantically equivalent from the browser's perspective.

If we're talking human readability, then I usually apply the "less code is better code" principle unless there's a good reason not to. I can't think of one in this case.

Richard Poole
  • 3,946
  • 23
  • 29
1

I don't know if there is any type of "pre-defined standard" for this sort of thing. However, in all of my CSS I always follow the mindset that less is more. And that is what I would recommend: write the least amount of good, clean, acceptable code to get your result.

Both of your options are easily readable, easily followed when/if changes need to be made, and are semantically correct. I suppose at that point it then comes down to personal preference. If you feel that your second option is more correct in your eyes, go with it.

Side note: You are saving 22 bytes in this example to do the same thing using option A. It may not seem like much, but it can add up.

Michael Irigoyen
  • 22,513
  • 17
  • 89
  • 131