Site-wide 'things'

[zzcgulm]

Hi Ben,

Firstly thanks for inventing ECSS.

Secondly, following on from Site Wide micro-namespaces #5 (https://github.com/benfrain/ecss/issues/5), I have a question about how Alert boxes fit in ECSS methodology.

So, in ECSS, what should I do with:

• 'things' that are site-wide but have different instantiations in a CMS (ie they occur >=1 with different content), eg our Alert boxes: https://ux.jisc.ac.uk/patterns/content-blocks/#alert-box
• as opposed to 'things' that are site-wide but have only one instantiation, eg Site header, Site footer, Shopping cart.

Should they live in:

1. a site-wide directory/file, with .sw namespace
2. their own Module?
3. or each instantation of the Notice box should be it's own ECSS Module

Thanks, Leigh

[benfrain]

Hi Leigh,

After considering this briefly my initial reaction would be to opt for a module for each box type and all the contextual variants contained in there. So individual modules like: BoxWarning, BoxInfo, BoxDanger and BoxSuccess, each with its own CSS file (e.g. BoxWarning.css, BoxInfo.css, BoxDanger.css and BoxSuccess.css).

Then namespace the classes to their context. So the variants for the warning boxes would all live in the BoxWarning module/css files:

.sw-BoxWarning {

}

If it was a site wide warning box. Or:

.doc-BoxWarning {

}

If it was a warning box in a document.

But, ECSS is intentionally loose enough to let you organise things a different way if you would rather, or you find it is more suitable.

[zzcgulm]

Thanks for the quick reply Ben, I have been implementing your comments. The results are:

• Three Modules, one for each type of box - there wasn't enough commonality between to warrant reducing the number of modules, as that would lead to incorrect application of variant classes.
• All classes are namespaced with .sw, as they are site wide not page specific.
  • .sw-ArchiveNoticeBox etc
  • .sw-AlertBox etc
  • .sw-NoticeBox etc
• Each module is a directory within the site-wide directory, to make sure their scope can be determined from the path, so:
  • /css/modules/site-wide/AlertBox/
  • /css/modules/site-wide/ArchiveNoticeBox
  • /css/modules/site-wide/NoticeBox

[benfrain]

Looks good to me 👍

[zzcgulm]

It's working well. The only downside I can find is using a .sw namespace = a loss of one layer of hierarchy in class name, ie an inability to describe the relationship between classes with same depth, as there are only 2 layers to play with instead of 3:

• .sw-Table_Thing
• .table-Thing_OtherThing

[benfrain]

Hi @zzcgulm are you happy you have all the info you need? If so, I'll close this one down. Otherwise, feel free to ask any further questions. :)

[zzcgulm]

Yup, sure am. Thanks.