Clash Royale CLAN TAG

Global scope elements within ITCSS

I've been developing front-end for 15 years. I may have become stuck in my ways, but in my front-end realm the architecture and the order by which scoped elements get developed is simple - setting aside pattern libraries, and the finer modular details.

I'm in the process on refining a new boilerplate, and the closest I can find that suits my idealogy - its a mashup of SMACSS, OOCSS and ITCSS. But, for the sake of making my projects legacy friendly for other developers I selected ITCSS as the core framework architecture, and anything else will progressively turn into OOCSS. Fine.

The one part I'm having difficulty decided on, is how/where to place my partials for the elements on the global scope, so header, main footer.

A lot of developers prefer to use them only once throughout their markup, as it makes for a cleaner,
more maintainable way of managing the front-end. So with regards to the ITCSS framework, which layer might these be included?

In my mind, they could be spread across multiple layers, eg. Specify header UI behaviour in 'objects', but then if we're only using header once, then it makes sense to place it within 'elements' - but then where do we add the more decorative styles to it? Components? I want to reserve the 'components' layer for elements within scope of the main tag.

So we have our header spread across 3 different layers - confusing/annoying. Is ITCSS the way forward?

1 Answer
1

Okay, I'm answering my own question, because I think the world needs to hear this. I might not be correct about everything. Its early days, but this beast needs to fly. Rant and sarcasm warning. Goods things intended.

I was having problems (logically and ethically) deciding where to place globally scoped elements in my ITCSS architecture. I didn't like the idea of mixing header, main, footer etc - alongside the more modular components - to me that didn't make any sense, and I disliked even more the idea of splitting those elements into various different layers.

So, I came up with...

FakeCSS - A mash up of SMACSS/ITCSS/OOCSS

Below we have an order of layers. This takes principles from ITCSS and SMACSS,
whereby we separate styles into relevant stacks, and place them in order of specificity.
Awesome, thanks Harry, that was the answer most of us were looking for. However,
I decided to abandon the concept of OOCSS, as seen largely in ITCSS, because I believed
too much separation defeats a few core principles. An example of this could be the header
element. If you aim to use it only once within your markup (as many of us do), then it
would be nicer to keep that element tidily in one place within your CSS architecture.
Rather than treat the header as an element, and object and a component (separating structure
from skin three different ways), just place it in a single 'layout' layer, so to avoid
traipsing around the place getting frustrated because you spent ages staring at the wrong file. That isn't to say that OOCSS has been abandoned completely, its just that whenever it does appear, it appears organically.

We're developers yes, and its a roller coaster world out there, the dizzy heights and go go
life make us driven, and competitively obsessed to the point where we are sweating blood and
tears, negligent and anti-social, but take look outside, its summertime, the grass is green
and the sky is blue. The wind is warm, but your rotten heart is as stagnant as your greasy hair.
Don't spend your better days worrying about code. Grow up - many of us have families, responsibilities,
other things to worry about, like walking the dog, painting your garden fence, fly a kite for
Christs sake, its therapeutic.

So make life easy and go FakeCSS.

1. Config - colors, spacings, breakpoints, settings
2. Tools - mixins, functions, family
3. Base - reset, fonts, body
4. Utilities - icons, animations, helpers
5. Vendors - flexslider, slickslider, datepicker
6. Objects - section, grids, sidebars, figures, video, overlay
7. Patterns - headings, lists, links, buttons, forms, paragraphs
8. Layout - header, main, nav, footer
9. Modules - breadcrumb, tabs, accordions, pagination, hero, carousel, cookies,
10. Pages - home, contact, search, 404


I'd like to thank the academy.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.