Using the CSS 7-1 & BEM methodologies to make your sites more maintinable and improve teamworking
When I first started out with CSS coding I had all of my CSS in one big long file. Jeesh. And I didn't have any naming conventions, I would just make a class and quickly write the CSS. The name of the class could have been box1, or vmers or silky-border or absolutely anything. There was no consistency.
After a while I started adding comments to my CSS. But far better was to use self documenting names. Classes that described what they were doing.
Then I had to get the hang of the fact that I wasn't writing a class just for that, classes could and should be used in other places, so I had to think of how this class could be used in the future when writing them.
That stopped me from writing a class on the actual element most of the time and instead writing a class on the container of the component instead. So instead of doing .super-cool-link I would be more likely to do .card-with-shadow a.
But the real thing that got me to be consistent was the BEM naming convention. That gave me a clear path to writing consistent code and consistent naming conventions. I didn't like using underscores so I created my own way of doing things. I only did this because underscores are slower to type. But each to their own.
Finally... I started writing code in their own files. Using the 7-1 structure really helped my site to be maintainable. It meant we could keep individual files in individual places. It meant I could always find the CSS I wanted to edit easily, it meant my team could to. If a client asked for something to be removed it was as simple as commenting out that style. If they client then wanted it back again, guess what, we still had the CSS and could just comment it back in again.
This saved us HOURS. And best of all, because we were CONSISTENT, it meant in a years time when we looked back on the project we could easily pick up where all the styling was.
Our team worked better, individuals worked better, it was more enjoyable, and we could do things quicker for our clients. All in all, it was a better outcome, so that is why I'm teaching you how we work.