@Eileenpk
Posted
Hi Thabiso,
To make naming easier I use BEM. BEM, which stands for Block-Element-Modifier, is just one of many front-end development methodologies, and whether or not it is the best choice for a particular project will depend on the specific needs and goals of that project. However, it is a popular and widely-used approach that many developers find helpful in keeping their code organized and maintainable.
BEM is a way of writing HTML and CSS that is designed to make it easier to understand the relationships between the various parts of a web page or application and to make it easier to reuse and maintain code over time.
To use BEM, you first identify the major "blocks" or standalone components on your page. These could be things like a header, a footer, a menu, or a search form. You then identify the smaller "elements" within those blocks, such as a logo within a header or a search button within a search form. Finally, you can use "modifiers" to indicate variations on a block or element, such as a different color or size.
In terms of actual code, BEM uses a naming convention to make it easy to see which elements belong to which blocks and which modifiers are being used. For example, the class for a block might be "header", the class for an element within that block might be "header__logo", and the class for a modifier might be "header__logo--large".
Cheers!
If you found this helpful please mark it as such :)
- Let's connect on LinkedIn! - @Eileenpk
Marked as helpful
@SefalaThabiso
Posted
Thank you @Eileenpk
I will sure to look more into BEM and implement it into my next project.
