By Luciano Sarno, A development student that has become really stuck with conflicts on a . CSS website Nightmare. No names describe better what I suffered when pair-programming with a colleague whose English accent I could barely understand. Ok, not his guilt. He was learning the same way as me. My partner loved to use many advanced selectors, like those: > more-2 h3 :first-of-type .footer header a .links-container ul li .more-1-element span :first-of-type The result? From the middle of the project on, every single error that we fixed, generated (at minimum) 5 more errors in other places of our page. That was how I’ve reached the experience-based conclusion about never coding without using a simple and well-documented methodology for code-organization. Googling if there was some known solution for that problem (I was a beginner) I found many methods. One of them, recommended by Google, was the Methodology (Block-Element-Modifier) BEM Complete docs here ( ) but I’ll do my best for making this easier for you that it was for me ;) https://en.bem.info/ Just follow the next simple tips, trust in me, you’ll never more get stuck with CSS conflicts and, of course, save tons of your precious LIFE hours. One Class for Inside  / Another Class for Outside Simple that. And the most important rule! < =" ">
        < =" "> article class article section class photo article__photo ‘ ’ class states how the element ‘photo’ behave internally (padding, colors, fonts). photo ‘ ’ class states how the element ‘photo’ behave in relation to the parent ‘article’ element (floating, margin, position, and so forth). article__photo And so forth! Why? Simple: now you can reuse the class ‘photo’ in several different places, just changing the positioning properties through the second class. Only class-selectors Trust me: All other kinds of CSS selectors were created by an intergalactic conspiracy against the earthling’s developers. Why? Simple: work creating a class for each created element. 10% more work avoiding CSS conflicts between infinite different priority CSS orders. 90% less Do your math ;) Naming properly also helps Very simple rules and you’re done: ‘ ’ use double underscore for separating the elementClass from the parentClass. parentClass__elementClass ‘ ’ use single underscore for small changes on some class (ex: change some color). parentClass__elementClass_modifier Congratulations! You already have the basics for starting with BEM and without CSS headaches! Wanna know more? Go to and have fun! https://en.bem.info/

Don't Go Crazy Because Of CSS Styles Conflicts

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Alpha, Beta, Gamma naming convention

BEM should not exist

CSS Block Element Modifier

End CSS Conflicts With Block-Element-Modifier (BEM)

An Important Thing for Beginner Developer

Boost Your CSS with BEM Naming and SASS Nesting

Alpha, Beta, Gamma naming convention

BEM should not exist

CSS Block Element Modifier

End CSS Conflicts With Block-Element-Modifier (BEM)

An Important Thing for Beginner Developer

Boost Your CSS with BEM Naming and SASS Nesting

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps