CODEWITHSUNDEEP
css
employee-0
employee-0

Reputation: 1041

When to specify elements for classes?

/*INPUT BOXES ( input )
*/


.toggle_border_show{
  border: 1px solid #cccccc;
}
.toggle_border_obscure{
  border: 1px solid #888888;
}
.toggle_border_hide{
  border: 1px solid #444444;
}

I noticed that these classes are only used on input elements.

Should I have pre-fixed them with input as such

/*INPUT BOXES ( input )
*/


input.toggle_border_show{
  border: 1px solid #cccccc;
}
input.toggle_border_obscure{
  border: 1px solid #888888;
}
input.toggle_border_hide{
  border: 1px solid #444444;
}

Does it matter?

Upvotes: 0

Views: 57

Answers (2)

Simon Arnold
Simon Arnold

Reputation: 16177

It is better not to specify the tag, but only the class according to Google - Optimize browser rendering.

Remove redundant qualifiers.
These qualifiers are redundant:
ID selectors qualified by class and/or tag selectors
Class selectors qualified by tag selectors
(when a class is only used for one tag, which is a good design practice anyway).

Also, If you run a test with Google Page Speed, you will get a warning if you use tag + class selectors.

Upvotes: 0

Danield
Danield

Reputation: 125651

If you know that the classes are only used on input elements then it is unnecessary to add the input before the class name.

Furthermore - as @PaulD.Waite mentioned in the comments - even if you plan on using these classes on other elements: if you are happy for these styles to apply to them as well - then input should still not be used before the class name.

Upvotes: 4

Related Questions