0

I have a medium sized web project that's growing. Here's what my ITCSS architecture looks like:

  1. Settings ...... global vars, config switches, brand colors.
  2. Tools ......... default mixins and functions, 3rd party tools.
  3. Generic ....... ground-zero styles (Normalize, resets, box-sizing).
  4. Elements ...... unclassed HTML elements (type selectors).
  5. Objects ....... cosmetic-free design patterns, agnostically named (wrappers, layouts, media).
  6. Components .... designed components, chunks of UI, group of objects.
  7. Themes ........ thematic styles, like seasonal or admin section.
  8. Force ......... Overrides, helpers, !important styles.

Where would you create the Layout related files?

  • Objects/o-3-column-layout.scss
  • Components/c-3-column-layout.scss
Kaloyan Kosev
  • 12,483
  • 8
  • 59
  • 90
phteven
  • 1,383
  • 2
  • 16
  • 29
  • Could you please clarify what you mean by saying the `Layout` related files? Are you talking about the grid system in general or about the specific project layout look and feel? Can you give a few examples of `Layout` related styles purpose? – Kaloyan Kosev Nov 16 '16 at 22:14

1 Answers1

1

The ITCSS (and even your own description of the ITCSS levels above) recommends putting layout-related files under Objects.

Layout-related CSS are 'class-based selectors which define undecorated design patterns' - rows, columns, spacers, pushes/pullers, etc.

Brett DeWoody
  • 59,771
  • 29
  • 135
  • 184