How to manage specificity issues using ITCSS and having forms?

Question

I have a large project, structuring its CSS architecture via ITCSS. All in all, I love it. However, I have one issue when styling forms.

I've styled different form elements in my elements layer:

in forms.scss:

input[type="text"], input[type="password"] {
  // sexy element styles
}

However, if I have a component that needs different styling:

in foo_component.scss:

.c-foo__text, .c-foo__password {
  // sexy component styles
}

Due to the selectivity of the input type in forms.scss, my component styles in foo_component.scss do not override the element styles in forms.scss.

The current refactor I'm thinking of is changing forms.scss to an object:

form_object.scss refactor:

.o-form__text, .o-form__password {
  // sexy object styles that will be overwritten by the lower component
}

I was wondering if this is a proper convention, or is there a better solution?

Answer 1

The main issue is caused by the fact you're declaring a very specific styling (input[type="text"]) in forms.scss quite hight in the specificity graph.

In the ITCSS, we start with the most generic styles and we end with the most explicit ones.

Moreover, lets look at the inverted pyramid layers:

I believe in the perfect case scenario you should apply your logic in the Generic, Base and the Components layers.

So, based on all this, having only the limited info you shared - I would advice you to refactor it this way:

1. Form styling in the Generic layer: Move any form / input related reset styles here. Use only global resets (like normalize.css or reset.css). These are ground zero styles. You could use a specific selector like input[type="text"], but only to reset style, not to add theme or anything related.

2. Form styling in the Base layer: Unclassed form elements comes here. Apply generic form or input styles here, that are shared across all elements. Do not use selector like input[type="text"] to style something that you would want to change on another element. Place only common styles here.

3. Form styling in the Components layer: Here is where your UI styles should be placed. Consider moving the // sexy element styles you're talking about here, assigning them to a class, like .form-control let's say. Below this class, add your other more specific class / UI modifiers.

In conclusion, note, that the decision depends from your specific use-case. There is no hard convention that can solve your issues. You need to make a decision based on all the project info you have. Different approaches would make sense in different stylesheet set-ups.

Anyways, if anything else fails, you could always reach ot to the Trumps layer :-)