Scribd
Upload
6 views7 pages

Styling Guidelines - CMS - Confluence

The document outlines the styling guidelines for CMS, emphasizing a mobile-first approach, the use of relative units like REM instead of absolute units like PX, and the B-BEM naming convention for CSS classes. It provides detailed do's and don'ts for CSS practices, including file organization for mobile and desktop styles, and recommendations for media queries and code reuse. The guidelines aim to optimize performance and maintainability in web design and development.

Uploaded by

tigorvenkatesh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views7 pages

Styling Guidelines - CMS - Confluence

The document outlines the styling guidelines for CMS, emphasizing a mobile-first approach, the use of relative units like REM instead of absolute units like PX, and the B-BEM naming convention for CSS classes. It provides detailed do's and don'ts for CSS practices, including file organization for mobile and desktop styles, and recommendations for media queries and code reuse. The guidelines aim to optimize performance and maintainability in web design and development.

Uploaded by

tigorvenkatesh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

6/26/23, 5:18 PM Styling Guidelines - CMS - Confluence

Styling Guidelines
CMS / Styling Guidelines Share

Owned by Guilherme Pina


Last updated: Apr 08, 2022 • 5 min read • 13 people viewed

Index
Index
Do’s and Dont’s
General
Sizes & Units
Selectors
SASS
Relative Units - REM
Setup
Usage
Media Queries
B-BEM
[Block]__[Element] -[Modifier]
Style splitting
Code splitting suggestion
File content breakdown

Do’s and Dont’s

General

DO use a Mobile-first approach

Style the base CSS for mobile and add media queries for tablet and desktop.

DO NOT include any Tablet/Desktop CSS, when loading for a mobile device

It will bloat the file size, slow down page performance, and degrade the user experience.

DO use a separate file for tablet/desktop CSS and use “media= ‘(min-width: 40em)’”

I will speed up page loading and the browser will automatically load the extra CSS if needed.

DO use “media=‘screen’” for CSS file <link> tags

If the device has no screen (eg: headless browser or screen reader), there is no need to download
styles.

DO NOT use inline CSS

Inline css does not get cached and besides that can lead to cascading style issues.

Sizes & Units

DO NOT use “PX”

“px” (pixels) are absolute units and break user accessibility by overriding the user preference.

DO use “REM” for every property with fixed sizes

“rem“ is a relative unit and ensures that the whole UI will scale properly to whatever size the user as
set.

https://ladenzeile.atlassian.net/wiki/spaces/CMS/pages/3668836397/Styling+Guidelines 1/7
6/26/23, 5:18 PM Styling Guidelines - CMS - Confluence

Use it to replace any property where you would consider using px for.
The only exceptions are media queries (em), and borders with a thickness between 1px tp 4px.
Read the section below or check this codepen example for more details
CMS / Styling Guidelines
DO NOT use arbitrary media query sizes, specially containing PX

DO use the provided media query @mixins

DO NOT use fixed values for element sizing

Selectors

DO NOT use IDs for element styling

DO use classes instead as selectors

DO use descriptive class names

DO NOT use selectors with with excessive specificity

extreme eg: .component a.child > div

DO NOT use selectors with more than 3 levels of depth.

With exceptions for pseudo-elements and component states.

DO use B-BEM class naming convention

B-BEM stands for Better-BEM. It's a variation that aims to reduce class name bloat and redundancy.
It follows the following convention: [block]__[element] -[modifier]
For more details check the B-BEM section below or this codepen example

SASS

DO NOT use “utility” classes (like Tailwind) directly in the HTML

Using “utility classes“ in the html will bloat the DOM and make it harder to read and maintain. This is
bad: <div class=”component -pt-8 -pt-tablet-24 -pt-deskt-40 text text-lg -blue border-2”>…</div>

DO use “%placeholder” with @extend to re-use code snippets

This approach will keep the code very DRY for blocks that are used throughout the code.
%placeholder classes will not generate any CSS unless used and will only include the code once,
grouping the selectors. eg: .class1, class2, class3 {…}

Relative Units - REM


Example ref for REM usage: https://codepen.io/guipina88/pen/LYOZmKm

The default DOM browser font-size is 16px, unless a user changed it for accessibility reasons.
By remapping <html> font-size to 62.5% (10px), it makes it easier for developers to use REM, while letting
the user to scale the UI.

eg: 1.6rem = 16px; 0.4rem = 4px; etc...

PX can still be used for border sizes, but everything else should use REM.

By using this REM approach, all content including media queries will work and sacale properly at any font-
size for any device.

https://ladenzeile.atlassian.net/wiki/spaces/CMS/pages/3668836397/Styling+Guidelines 2/7
6/26/23, 5:18 PM Styling Guidelines - CMS - Confluence

EM could also be used but extreme caution, since the unit takes the relative font-size of it’s parent
element, however, it is superseded by the current element's font-size.

CMS / Styling Guidelines


This behaviour can make EM hard to use and maintain, and lead to unpredictable results.

Setup

Change the base value by remapping the root value (16px) to 10px

1 html { font-size: 62.5%;} /* remaps the base 16px to 10px */


2 body { font-size: 1.6rem; /* sets page font-size as 14px */ }

alternatively, another approach using SASS functions could be used to transform the values for us without
having to remap the root value.

1 @function stripUnit($value) {
2 @return $value / ($value * 0 + 1);
3 }
4 @function rem($pxValue) {
5 @return #{stripUnit($pxValue) / 16}rem;
6 }
7
8 // usage
9 font-size: rem(24px);

This approach however could make it harder to debug layout issues in production since the values
can be something like: 1.846rem, etc…

Usage

The REM unit is now remapped to a base 10px which is easier to work with. All you need to do is to devide
the pixel value by 10.

eg:
120px = 12rem
16px = 1.6rem
8px = 0.8rem

example:

1 button {
2 font-size:2.4rem;
3 padding: 2.4rem 1.6rem;
4 margin: 0.8rem 0;
5 flex: 1 0 100%;
6 border: 1px solid black;
7 border-radius: 1.6rem;
8 }

Media Queries

IMPORTANT

media queries have no parent and exist at :root level so when using REMs or EMs, the reference is
still base 16px and NOT the remapping of 10px.

1 /* big screen 768px*/


2 @media screen and (min-width: 48rem) {

https://ladenzeile.atlassian.net/wiki/spaces/CMS/pages/3668836397/Styling+Guidelines 3/7
6/26/23, 5:18 PM Styling Guidelines - CMS - Confluence
3 button {
4 border-radius: 0.4rem;
5 }
6 }
CMS / Styling Guidelines

B-BEM
Example ref for B-BEM usage: https://codepen.io/guipina88/pen/OJzZNVK

B-BEM stands for Better BEM (Block Element Modifier)


It is an attempt at overcoming sume of BEM issues, like extremely long and redundant class names all over
the HTML, specially when using modifiers.

classic BEM looks like this:

1 <div class="component-name component-name--modifier">


2 <div class="component-name__child-element component-name__child-element--another-modifier">

instead, with B-BEM we can do this:

1 <div class="component-name -modifier">


2 <div class="component-name__child-element -another-modifier">

and the SCSS:

1 .component-name {
2 &__child-element {
3 ...
4 &.-modifier {...}
5 &.-another-modifier {...}
6 }
7 }

This approach lends itself well for components since the styling of component elements is scoped.

An attempt has been made to to simplify the element name to simply: _[element], given that it
lives in the component context.

1 <div class="component-name -modifier">


2 <div class="_child-element">

SCSS

1 .component-name {
2 &.-modifier {...}
3
4 ._child-element {...}
5 }

This however, could lead to element naming clashes if a child component happens to have an
element with the same name.

https://ladenzeile.atlassian.net/wiki/spaces/CMS/pages/3668836397/Styling+Guidelines 4/7
6/26/23, 5:18 PM Styling Guidelines - CMS - Confluence

1 <div class="parent-component">
2 <div class="_child-element">
3 <button class="another-component">
CMS / Styling Guidelines
4 <!-- this element would be affected by the "parent-component"-->
5 <span class="_child-element">

SCSS

1 .parent-component {
2 // this selector would affect any element with the same name that is a descendant
3 ._child-element {background:red;} // same name
4 }
5
6 .another-component {
7 ._child-element {...} // same name
8 }

This wouldn't be a problem with CSS modules, as it suffixes the class names with an unique hash.
In that case, the variant [Block] _[Element] -[modifier] could be used instead.

1 <div class="parent-component__xyz123">
2 <div class="_child-element__xyz123">
3 <button class="another-component__jkl789">
4 <span class="_child-element__jkl789">

For the context of SCSS needs to be used instead:

[Block]__[Element] -[Modifier]

1 <div class="component-name -modifier">


2 <div class="component-name__child-element -another-modifier">

Style splitting
In order to optimize performance and deliver the best experience to our users, we should aim to load as
little data as possible, as fast as possible.

To achieve this on the styling side, the CSS must be split into multiple files in order to leverage caching
and to load only what is necessary for the device type and page.

Code splitting suggestion

1 <!DOCTYPE>
2 <html>
3 <head>
4 <link rel="stylesheet" href="lz-core.css" media="screen">
5 <!-- desktop version adds additional style -->
6 <link rel="stylesheet" href="lz-core_desktop.css" media="screen and (min-width:40rem)">
7
8 <link rel="stylesheet" href="lz-homepage.css" media="screen">
9 <!-- desktop version adds additional style -->

https://ladenzeile.atlassian.net/wiki/spaces/CMS/pages/3668836397/Styling+Guidelines 5/7
6/26/23, 5:18 PM Styling Guidelines - CMS - Confluence
10 <link rel="stylesheet" href="lz-homepage_desktop.css" media="screen and (min-width:40rem)">
11
12 <!-- as a performance improvement, the styling for FSP can be cached ahead of time -->
13 CMS <link rel="prefetch"
/ Styling Guidelines as="style" href="/lz-fsp.css" media="screen"/>
14 <!-- same here for desktop -->
15 <link rel="prefetch" as="style" href="/lz-fsp_desktop.css" media="screen and (min-width:40rem)"/>
16 </head>
17 </html>

File content breakdown

Core CSS File (mobile)


should only contain the common styling for the entire platform
CSS Reset
Theme variables
Colors
Typography
etc…

Common elements
Buttons

Card
Grid System
etc…

Common components
Header
Footer
Newsletter widget
Grid Item
etc…

Core CSS File (desktop)


tablet and desktop media queries with changes for the same components

Page-specific CSS File (mobile) - eg: Homepage


should only contain the styling for components specific to its page type
Hero banner

Banner slider
Item slider?
Popular Categories
Popular brands
Inspiration widget

Page-specific CSS File (desktop)


tablet and desktop media queries for page-specific components

Add label

https://ladenzeile.atlassian.net/wiki/spaces/CMS/pages/3668836397/Styling+Guidelines 6/7
6/26/23, 5:18 PM Styling Guidelines - CMS - Confluence

CMS / Styling Guidelines

https://ladenzeile.atlassian.net/wiki/spaces/CMS/pages/3668836397/Styling+Guidelines 7/7

You might also like