Don't Go Crazy Because Of CSS Styles Conflicts
Finally assuming a 10 years secret-affair with software development.
By Luciano Sarno,
A development student that has become really stuck with CSS
conflicts on a 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:
.footer header a
.links-container ul li
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 BEM
Complete docs here (https://en.bem.info/
) but I’ll do my best for making this easier for you that it was for me ;)
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!
<section class="photo article__photo">
- ‘photo’ class states how the element ‘photo’ behave internally (padding, colors, fonts).
- ‘article__photo’ class states how the element ‘photo’ behave in relation to the parent ‘article’ element (floating, margin, position, and so forth).
Simple: now you can reuse the class ‘photo’ in several different places, just changing the positioning properties through the second class.
Trust me: All other kinds of CSS selectors were created by an intergalactic conspiracy against the earthling’s developers.
- 10% more work creating a class for each created element.
- 90% less work avoiding CSS conflicts between infinite different priority CSS orders.
Do your math ;)
Naming properly also helps
Very simple rules and you’re done:
- ‘parentClass__elementClass’ use double underscore for separating the elementClass from the parentClass.
- ‘parentClass__elementClass_modifier’ use single underscore for small changes on some class (ex: change some color).
You already have the basics for starting with BEM and without CSS headaches!
Wanna know more?
Subscribe to get your daily round-up of top tech stories!