Attribute selectors and client-side validation

[Tom]

Hi there,

I ran into the following problem today:
input[type="text"] { border: 1px solid grey }
input.valid { border: 1px solid green }

According to CSSLint the input-tag in front of the valid class is bad
code. I put the input in front of the attribute-selector because it is
needed for good css-performance.

CSS-Lint does not bother with the input in front of the attribute-
selector but tells me, that the tag in front of the class selector is
bad.
I do understand this rule and I tend to agree, but how are we supposed
to do correct client-side validation without having to use inline-
styles via js which is not according to good js-maintainability?

Best regards,
Tom

[Nicholas Zakas]

Hi Tom,

CSS Lint is simply recommending that you omit "input", such as:

.valid { border: 1px solid green }

Unless you're also putting the "valid" class on something other than "input", you don't get any benefit by including the tag in the selector.

By the way, if CSS Lint sees that you've applied "valid" on multiple different tags, it won't show you this warning.

-N

[Tom]

Hi Nicholas,

thanks for your reply.

If I omit input with valid I would have to do it like this, if I want
to use it on every element I like:

[type="text"] { border: 1px solid grey }

.valid { border: 1px solid green }

But [type="text"] is a slow selector according to
https://developer.mozilla.org/en/writing_efficient_css

If I'd declare it for every element possible my stylesheet will be
bigger, which is bad for performance and maintainance as well...
input.valid, p.valid, h1.valid, .... { border: 1px solid green }
Is this how you want me to write it? And if yes, why? It's more
flexible without a tag.

I don't think that this is the best practice.

Regards,
Tom

[Nicholas Zakas]

Hi Tom,

Sorry, I think I was unclear. Basically, the problem is with input.valid, that's where you're getting the warning. You definitely should use input[type=text]. This shouldn't cause a warning, but if it does, please file an issue.

-N

[Tom]

Hm...

I think we are talking about different things :)
input[type="text"] does not produce a warning.

Here is a testcase: http://jsfiddle.net/shapeshifta/kHKjB/1/
input[type="text"] {color: red}
.validNotWorking {color:green}
input.validWorking {color:green}

The class without input does not overwrite the style by qualification.
I have to qualify with the tag instead.
But if I do this, CSSLint throws a warning.
My question was, how I should do this correctly.

Doing input.validOk, textarea.validOk, p.validOk.... {color:green} and
so on makes the stylesheet bigger and so
I couldn't use it on radiobuttons, checkboxes and textinputs with just
this one definition.

I would love to know how to do this ...
Tom