This content originally appeared on DEV Community 👩💻👨💻 and was authored by Anand Doddamani
Hello Buddies,
In Today's story we are discussing about naming convention in HTML and CSS.
We are Discussing about BEM naming convention where B - Body, E - Element, M - Modifier. You may had a glance of naming classes similar as mentioned below
//Wrong
.catlystNavbar{ ... }
.catlystNavbarLogo{ ... }
.catlystNavbarBg{ ... }
//Correct
.catalyst-navbar { ...}
.catalyst-navbar__logo{ ...}
.catalyst-navbar--bg{ ...}
BEM attempts to divide the overall user interface into small reusable components.
To understand efficiently let us take an example of our a navbar
Catalysts Navbar
The above navbar represents as element, such as a block of design.
Which represents the first letter of BEM that is Block and the component styled similarly as shown below
.catalyst-navbar{ ... }
E - Element
E stands for Element in BEM
For instance, the catalyst-navbar a logo and links
The logo and links are all elements within the component. They may be seen as child components, i.e. children of the overall parent component.
Using the BEM naming convention, element class names are derived by adding two underscores, followed by the element name.
.catalyst-navbar__logo{ ... }
.catalyst-navbar__content{ ... }
M - Modifier
M stands for Modifier in BEM
What if the navbar was modified and we could have a blue or a red background
In the real world, this could be a red button or blue button. These are modifications of the component in question.
Using BEM, modifier class names are derived by adding two hyphens followed by the element name.
For Example:
.catalyst-navbar--bg{ ... }
.catalyst-navbar--red{ ... }
.catalyst-navbar--blue{ ... }
Here is the final code I wrote for this navbar
Now the question arrise , Why naming convention is required ?
Naming things is hard. We're trying to make things easier, and save ourselves time in the future with more maintainable code.
Naming things correctly in CSS will make your code easier to read and maintain.
If you choose to use the BEM naming convention, it will become easier to see the relationship between your design components/blocks just by looking at the markup.
This content originally appeared on DEV Community 👩💻👨💻 and was authored by Anand Doddamani
Anand Doddamani | Sciencx (2022-09-10T19:22:19+00:00) How To Name Classes in HTML and CSS using BEM. Retrieved from https://www.scien.cx/2022/09/10/how-to-name-classes-in-html-and-css-using-bem/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.