PatternFly Core is based on the principles of Atomic design and BEM (Block, Element, Modifier).
BEM is a popular CSS methodology for building modular, scalable applications. It provides scope, avoids inheritance, and reduces CSS specificity and conflicts.
BEM works perfectly with a modular design system, as each unique component can be represented as an independent block. Since a block is tied to a component, developers are able to develop, move around, and nest components without conflicts in their application’s CSS.
PatternFly uses a modified version of BEM for its CSS architecture. Where PatternFly deviates from BEM is in relation to modifiers.
This module covers how PatternFly uses BEM as a framework for its component library. You'll learn how to override and create both global and component-level custom properties and component elements.
Congratulations! You finished the "variable naming principles" course.

Steps
Variable naming principles
Override Component Variables
This step looks at how component variables are named.
In PatternFly, component-level custom properties follow this general formula: --pf-c-block[__element][--modifier][--state][--breakpoint][--pseudo-element]--PropertyCamelCase.
--pf-c-block
refers to the block, usually the component or layout name (e.g.--pf-c-alert
).__element
refers to the element inside of the block (e.g.__title
).--modifier
refers to a modifier class such as.pf-m-danger
, and is prefixed with m- in the component variable (e.g.--m-danger
).--state
is something like hover or active.--breakpoint
is a media query breakpoint such as sm for $pf-global--breakpoint--sm.--pseudo-element
is one of either before or after.PropertyCamelCase
refers to the property that is being changed.
Katacoda is setting up a new application. Begin coding once the server starts and "Welcome to PatternFly" appears on the lower pane.
In this step, override the title color custom property in the success variation of the alert component.
1) Add a success alert component to index.html
.
Click the Copy to Editor
button below to add the success component in the index.html
file.
<div class="pf-c-alert pf-m-success"> <div class="pf-c-alert__icon"> <i class="fas fa-check-circle"></i> </div> <h4 class="pf-c-alert__title">Success alert title</h4> </div>
2) Set up the styles file for the alert component.
Click the Copy to Editor
button below to set up the stylesheet in the myapp.scss
file.
:root { // Add global variables here } .pf-c-alert { // Add Alert component variables here }
3) Write the block for the custom property name.
Overriding the success variation’s title color means overriding its custom property.
In the myapp.scss
file, in the .pf-c-alert{}
block, write the custom property name.
In reference to the documentation above, it should be: --pf-c-alert
4) Add the modifier to the custom property name.
Reference the documentation by scrolling down to the bottom to view the alert component's documentation. Note that the success variation class .pf-m-success
applies to .pf-c-alert
. Add that modifier to the custom property.
The custom property name should now be: --pf-c-alert--m-success
5) Add the element to the custom property name.
The element that is being changed is the title
of the alert.
The custom property name should now be: --pf-c-alert--m-success__title
6) Add the property that is being modified.
In this case, modify the color property of the title in the alert component.
The custom property name should now be: --pf-c-alert--m-success__title--Color
7) Add a declaration using the new custom property created in steps 3-6.
PatternFly's global danger color is: --pf-global--danger-color--100
.
Assign the custom property name (--pf-c-alert--m-success__title--Color
) that is already inside of the .pf-c-alert{}
block to the global danger color.
It should look like this:
--pf-c-alert--m-success__title--Color: var(--pf-global--danger-color--100);
Note: The alert component should have a new color for the title.
You’ll love Katacoda

Guided Path
Knowing what you need to know is the hardest part. Our guided pathways help build your knowledge around real-world scenarios.

Learn By Doing
The best way to learn is by doing. All our tutorials are interactive with pre-configured live environments ready for you to use.

Stay up-to-date
It's a competitive industry. Your skills need to keep up with the latest approaches. Katacoda keeps your skills up-to-date.
You’ll love Katacoda

Guided Path
Knowing what you need to know is the hardest part. Our guided pathways help build your knowledge around real-world scenarios.

Learn By Doing
The best way to learn is by doing. All our tutorials are interactive with pre-configured live environments ready for you to use.

Stay up-to-date
It's a competitive industry. Your skills need to keep up with the latest approaches. Katacoda keeps your skills up-to-date.