[Refactor HTML/CSS] Some selectors in _forms.scss are overly specific

[webinista]

Description
form button[type=submit] form input[type=submit] and form input[name=password] are more specific selectors than necessary. In order to override them, you have to use a selector that's at least as specific, or use the !important keyword, e.g. form button[type=submit].my-specific-override-class.

Ask
De-nest these selectors, and use [type=submit] and [name=password] instead. They are less specific, which means a developer can override specific declarations with a class name.

To Do

• Update web-design-standards/assets/_scss/components/_forms.scss and move the rulesets for button[type=submit], input[type=submit], and input[name=password] out of the form block.
• Change the selectors to [type=submit] and [name=password]

[maya]

@webinista thanks for your feedback! We'd definitely like to review some of our specificity, so this is helpful.

[msecret]

I think when we have any rules like this:

input[type="text"],
input[type="email"],
...

we should change to this:

[type="text"],
[type="email"],
...

[juliaelman]

Refs #1342

[maya]

@msecret I just checked src/stylesheets/components/_forms.scss and there's no element attached like this button[type=submit], input[type=submit], and input[name=password] on the form block, so it looks like this was previously resolved.

What you're referring to is in src/stylesheets/elements/_inputs.scss - would you like to close this issue and re-open one for _inputs.scss?

[msecret]

Yes their in inputs here: https://github.com/18F/web-design-standards/blob/staging/src/stylesheets/elements/_inputs.scss#L21.

Something to try: why do we need the specific type rules if they all include input. What if the rule was just input {?

[msecret]

I wouldn't close and reopen an issue, I'd just reuse this one.

[maya]

@msecret Is there any issue with: https://github.com/18F/web-design-standards/blob/staging/src/stylesheets/elements/_inputs.scss#L149

input[type="checkbox"],
input[type="radio"]

Do we want to change it to

[type="checkbox"],
[type="radio"]

?