-
Notifications
You must be signed in to change notification settings - Fork 0
CSS coding style
Across digital's products we recommend the use of BEM (Block, Element, Modifier) naming convention for you CSS classes. For more information on the BEM naming convention see their docs at http://getbem.com/introduction/
We prefix our CSS classes with both a product name and also with what it is.
When naming a component which is unique to your product it will require the product name in order to namespace it. Therefore it is clear when a product uses a shared component and which are unique to the product.
[product-name]-c-[component-name]
As an example the offer card in the offers applications would look like this:
offers-c-card
Global components that are part of the design system are prefixed:
coop-c-[component-name]
The prefix is then followed by a prefix signifying what that Block is. These are:
c for Component
l for Layout
u for Utility
t for Typography
We use postcss-nested plugin allowing for Sass style nesting as the authoring benefits here are well worth it. To ensure that nesting does not get too unruly we have detailed some following rules around nesting.
Where possible it is always good to avoid nesting. As we implement BEM naming convention it should mean our components are already specific enough to avoid clashing.
Examples of writing a component.
.coop-c-card {}
.coop-c-card__image {}
.coop-c-card__heading {}
.coop-c-card {
& coop-c-card__image {}
& coop-c-card__heading {}
}
Both are valid as their output will be the same.
--color-font: #00b1e7;
h1 {
color: var(--color-font);
}
We use the postcss-custom-media plugin to allow us to use the draft spec of @custom-media in our CSS. The benefit is we can use similar syntax to custom properties within our media queries.
@custom-media --mq-small (max-width: 30em);
@media (--mq-small) {
/* narrow window styles */
}
When adding hooks for JS prefix the hook with js-[hook-name]. Do not use the hooks to add CSS styling.