3

I am creating a stylesheet inspired by ITCSS, BEM, and OOCSS and am unsure how to separate structure properties from cosmetics properties.

An example as I understand ITCSS and OOCSS:

//First the structure. Button is an object (ITCSS)
.o-btn {
    height: ...;
    width: ...;
}

//Then declare the cosmetics in components
.c-btn-login {
    background: ...;
    color: ...;
    ...
}

What I have problems to see are more related with ITCSS. Two different prefixes (two categories) for the same element, when I could have the same prefix for the same element, and probably be more clear to understand.

Is this approach correct?

lifeisfoo
  • 15,478
  • 6
  • 74
  • 115
Ismael Ordás
  • 370
  • 4
  • 12

1 Answers1

1

In my opinion I think the c-btn-login way is wrong. In this case the component is the form.

<form class="o-form c-form-login t-form-dark" >
  <input type="text" class="o-input">
  <input type="password" class="o-input" >
  <input type="submit" value="Login" class="o-btn">
</form>

With this structure you can apply cosmetic styles with the t-form-dark class for all component children or use a specific class for a child like t-btn-dark.

.t-form-dark {
    .o-input{}
    .o-btn{}
}
Andrew Myers
  • 2,754
  • 5
  • 32
  • 40
Pablo Enanoski Araya
  • 85
  • 9
  • In that case, do you declare form as an object (only structure) and then as a component (cosmetics)? – Ismael Ordás Oct 01 '15 at 07:44
  • i use component class c-form-login for specific styles and theme class t-form-dark for cosmetics styles... if added cosmetics styles in the c-form-login i can't use this styles in other forms... think in a website we have a c-form-login, c-form-contact, c-form-newsletter, c-form-search, c-form-user-profile, etc....then create a t-form for styles all my forms, if a want a specific style for c-form-login then create theme class called t-form-login for that – Pablo Enanoski Araya Oct 02 '15 at 13:15
  • Yes, those different classes for different forms make sense. But I would use the "t-" classes for the general theme of the web, not for elements. Theses methodologies (or architectures) seems to have a personal point of view. Anyway, thanks for your comment, I see it clearer now. – Ismael Ordás Oct 03 '15 at 20:55