Components represent reusable blocks that are expected to be applied multiple times across a site. From a CSS perspective, these require coordination of multiple styles (often classes) to achieve a unified output—although in methodologies such as BEM or FUN, these may be composited together to reduce specificity.
Note: Ignia does not use BEM or FUN naming conventions, but the Sass structure is intended to be naming convention agnostic.
From Ignia’s perspective, components will frequently map to other blocks of reusable code, such as an MVC partial, an AngularJS directive, or a JavaScript control (such as a Date Picker); in those cases, the component should share the same name as their counterparts (e.g., a Menu.js would map to /Components/Menu/_menu.scss).
Because the goal of components is to fully encapsulate functionality, each may have their own placeholders (via _placeholders.scss), functions (via _functions.scss), and mixins (via _mixins.scss); all of these will be imported into the /Component/Component/_component.scss file (e.g., /Components/Menu/_menu.scss). Each component will, in turn, be imported into the _components.scss file so it is easy to reference.