Can this CSS syntax be improved, be made more organized?

Is there a cleaner way to write the same css given that input name f1 to f7 a开发者_Go百科re all type=text like the first line?

Thanks

#tform input[type="text"]  { -moz-border-radius:6px; border: 1px solid green; }

#tform input[name="f1"],
#tform input[name="f2"],
#tform input[name="f3"], 
#tform input[name="f4"],
#tform input[name="f5"] { width:40%; }

#tform input[name="f6"] { width:80%; display:block; }

#tform input[name="f7"] { width:80%; }

My problem is actually that I have 3 additional inputs: name f8, f8, f10, also type=text which I'm letting them set width naturally without width:%;.

I thought about putting the 40% into the first line and letting the rest override it, but then those additional 3 will take the 40% by default.

Considered giving f1-f5 a class instead? It might be a few extra bytes of HTML, but you get far cleaner CSS.

.yourClass { width: 40%; }

Clear it up and make use of class selectors:

.input_text{ -moz-border-radius:6px; border: 1px solid green; }
.stylea{ width:40%; }
.styleb{ width:80%; display:block; }
.stylec{ width:80%;}

And then in your HTML:

<input type="text" name="f1" class="input_text stylea" />
<input type="text" name="f2" class="input_text stylea" />
<input type="text" name="f3" class="input_text stylea" />
<input type="text" name="f4" class="input_text stylea" />
<input type="text" name="f5" class="input_text stylea" />
<input type="text" name="f6" class="input_text styleb" />
<input type="text" name="f7" class="input_text stylec" />

For any additional input elements, you can just use the base CSS selector style, in this case .input_text, and not apply the additional class selectors (.stylea, .styleb, .stylec) used by others.

So when you add the rest:

<input type="text" name="f8" class="input_text" />
<input type="text" name="f9" class="input_text" />
<input type="text" name="f10" class="input_text" />

They'll keep the same look as the other inputs but not be constrained with the rest of the width sizing.