I've really enjoyed digging into CSS methods in the last several days. Hat tip to @bhaibel for her great response to a question from @allison_seboldt , How Do You Organize Your CSS?.

I'm reading Combining SEM and BIO for Improving CSS by Ryan Yu, and it's a fantastic synthesis of a bunch of methods (BEM, ITCSS, OOCSS).

Hero units are a staple for content pages these days. Here's what Ryan has to say about layers in ITCSS:

• "Objects (namespace: o-) are used for design patterns, such as layouts, where items are being arranged rather than decorated."
• "A component (namespace: c-) is a small feature that makes up a part of the website. Think buttons, accordions, sliders, modal dialogs, etc."
• "On the other hand, the header, for example, would be a pattern because it is not scaleable (the header cannot be used in the content or sidebar area) and also contains other components such as buttons, accordions, menus, logos, search form etc."

This seems to indicate a hero would be a pattern. But I think it's odd to define "scalability" in terms of where something is used on a page. Is that what we mean we talk about "scalable CSS"?

Ember and React have me thinking of components as pieces of UI, which semantically a hero is, but I'm thinking that "component" in the markup sense is different than "component" in the ITCSS sense.

What do you think?