CSS
Attribute selectors are powerful but can be brittle
Use attributes to style meaningful states, and understand how selector combinations affect specificity.
Attribute selectors are useful when presentation follows an element's state. They become fragile when styles depend on copy that can change.
Count specificity accurately
[type="email"] and .email-input both have specificity 0-1-0. The selector input[type="email"] has specificity 0-1-1 because it also includes a type selector.
input[type="email"] { border-color: gray; } /* 0-1-1 */
.email-input { border-color: blue; } /* 0-1-0 */
Within the same cascade origin, importance and layer, the first selector wins for an element matching both.
Select stable attributes
Prefer state such as [aria-expanded="true"] over [placeholder="Search here"]: translating a placeholder should not break presentation. Use :disabled for native disabled controls.
Do not assume attribute selectors cause a measurable performance problem. Profile actual style recalculation before choosing a less expressive selector for speed.