Ray Costanzo wrote:
> Hi list,
>
> I'm currently converting a site from an old programming platform to
> something current, and while I'm at it, I'm doing my best to clean up the
> CSS usage and lack of CSS usage. In theory, I'd like to have no inline
> style anywhere. But, is this just too idealistic? Some of the quandaries
> I've come across:
>
> -Input elements, i.e. textboxes - sometimes they'll hold names, sometimes
> ZIP codes, app-specific numeric data, initials, cods, and other various
> things that I don't seem to be able to classify.
>
I generally combine IDs, attribute selectors (with IE6 workarounds), a
liberal scattering of classnames, and a healthy dose of context to avoid
inline styling on forms.
Firstly, you can basically always use ID as an alternative to an inline
style. Sometimes you don't gain very much in simple code
efficiency/maintenance terms. You just shift the rules from the HTML
file to the CSS file - the overall amount of code is pretty much the
same. You may therefore occasionally decide an inline style is OK. I
think the situations where you wouldn't be better with a class or ID
(inline styles as inherently evil aside) are very rare, and very
specific, and mostly don't apply to forms...
On a form, most of your input elements already have a unique ID. So you
can use this ID to style specific elements where you need to, e.g. if
you want zip code to appear a specific length, and your zip code box has
the obvious ID, then "input#zipcode {width: 8ex}" would get you a box
roughly 8 characters wide. If you have several zip code boxes just
combine them into one CSS rule, e.g. "input#zipcode1, input#zipcode2
{width: 8ex}".
Styling every element by specifying its ID in your CSS is normally
excessive though. You can handle the different basic input types more
neatly with attribute selectors. For example styling text inputs
differently from checkboxes with "input[type=text] {width: 20em}" vs
"input[type=checkbox] {width: auto}".
Of course attribute selectors aren't supported in IE6 and below. You
might therefore want to revert to specifying all the inputs by their ID
in the CSS, at least for IE6 (via conditional comments). Alternatively
you can develop a mild - though justifiable - case of class-itis. At
it's simplest the workaround is to add a class matching the type
attribute to each element, e.g. <input type="text" class="text">. (To
keep things a bit lean and stop the classes going mad, I normally create
a base style for text boxes, and then only add classes to non-text
inputs, e.g. checkboxes, radio, submit, image, or vice versa.) You can
use a similar approach if you have *lots* of something like zip code
boxes. Add a class="zipcode" to each one and just have a single style
rule "input.zipcode{width: 8ex}" instead of running through the IDs of
each one.
You may find you're better to put the class on a parent element instead,
and then harness context to give you more flexible styling options. For
example I tend to place each label/input combo within a <p> tag (just my
approach, I know some people prefer <li> or <div> as they aren't really
paragraphs). Typically you want the label for a checkbox to be styled
differently from the label for a textbox - different width, inline not
block etc... As there is no way in CSS to target the parent of an
element (e.g. I can't say if the <p> is the parent of
input[type=checkbox] apply this styling) I put a class corresponding to
the 'type' of input onto the parent, e.g. "<p class="checkbox"><input
type="checkbox"><label>Tick this box</label></p>". Now I can style both
the label and the input differently for checkboxes. (Again, a base style
for your most common element and then just adding classes to the
variations keeps things leaner.)
You can extend this use of context over class to further reduce the
nasty case of class-itis this approach can induce. If your form breaks
up into logical sections, e.g. a bunch of text inputs, followed by a set
of checkboxes and radio buttons, wrap each section in its own fieldset
or div, and slap an ID or class on that, dropping the classes from the
inputs or their direct parents. Then use CSS like "fieldset.classname
input {/*your rules here*/}" to style the inputs, labels etc... in each
section differently.
Final tip: on a site with lots of forms, I like to give each one an ID
which is unique across the whole site so I can style that particular
form differently if necessary.
--
Sophie Dennis, Creative Director
Cayenne Web Development Limited
www.cayenne.co.uk
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
