Home/ Questions/Q 3666746
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T01:55:03+00:00

I have a feeling that this is a subjective question, but perhaps there’s something

  • 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 🙂

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0