What's the right mindset when making CSS and BEM
I'm watching KP's css responsive layout, I thought I did pretty well, then KP uses a lot more reusing of classes, being effective with inheritance. I was much more focused on keeping everything within it's own box- putting each class with it's seperate rules and only overlapping once or twice. I know in the demystified he says it's really up to you, however I want to know what you guys think and what mentality you have towards CSS , bem and other rulesets.
4 Replies
This was my code for the fourth challenge
I want to understand the mindset difference, and knowing where and how to reuse classes- do you look at the website template or page and:
Look at what could be reused,
What could be filled with inheritance and what only needs slight difference.
How do you know how to write css so it can be updated easily?
This below was Kevin's:
*, *::before, *::after {
box-sizing: border-box;
}
/*
font-family: 'Roboto', sans-serif;
font-family: 'Playfair Display', serif;
*/
body {
margin: 0;
font-family: 'Roboto', sans-serif;
font-size: 1.3125rem;
line-height: 1.6;
color: #222C2A;
}
img {
max-width: 100%;
}
h1, h2 {
font-family: 'Playfair Display', serif;
font-weight: 900;
margin-top: 0;
line-height: 1.1;
}
section {
padding: 4em 0;
}
.container {
width: 85%;
margin: 0 auto;
max-width: 1128px;
}
.section-title {
font-size: 2.25rem;
color: #F3EED9;
}
.section-title--dark {
color: #824936;
}
.intro {
background: #F3EED9;
text-align: center;
color: #824936;
min-height: 660px;
display: flex;
align-items: center;
}
.intro__text {
text-transform: uppercase;
letter-spacing: 10px;
font-size: 1.125rem;
color: #222C2A;
margin: 0 0 .25em;
}
.intro__title {
font-size: 3rem;
}
.section-three {
background-color: #222C2A;
color: #fff;
}
.section-four {
background-color: #824936;
color: #fff;
}
@media (min-width: 800px) {
.row {
display: flex;
}
.col {
width: 100%;
}
.col + .col {
margin-left: 5em;
}
.intro__title {
font-size: 3.75rem;
}
}If you're asking how to architect css, it's really up to you or the team you're working with. My advice: don't overthink it. Just get something to work. If you find yourself using the same set of styles more than once, throw that in a class and reuse it.
In my experience, BEM is a bit overkill if you're working on something small and I wouldn't bother with it unless you're just trying to learn something new. It's good to expose yourself to different ways of architecturing (is that a word?) css, but you may find it's a bit cumbersome and that's totally okay. Or maybe you'll really like it and want to stick with it and that's great too! Whatever you feel works the best for you honestly
Thank you this really helped me a lot. I think I'll stick with my way of using bem and combining it with code reusability and ability to add or change things in the future.