Using media queries, following standards with SASS and BEM? - sass

Question

I am following the BEM practice and want to add specific break points, it appears 2 formats work for me. Does anyone know the advantage of either ?
Here is the first, I embed the media directly into the element (BEM)
.my-component {
&__section-field {
display: flex;
flex-wrap: wrap;
}
&__section-sep {
width: 100%;
#media(min-width: 900px) {
width: 50%;
}
}
}
Here is the second, where I embed the media query outside of the section and redefine the section again.
.my-component {
&__section-field {
display: flex;
flex-wrap: wrap;
}
&__section-sep {
width: 100%;
}
#media(min-width: 900px) {
&__section-sep {
width: 50%;
}
}
}
As you can see the, I am basically changing the width of an item between either 50% or 100% depending if it's mobile only resolution. I am using flexbox with flex-wrap and it wraps depending on there is space left on the line.
They both seem to work the same as far as I can say. Would anyone confirm if there is a difference and which one would be more scalable and maintainable?
Maybe there is something that I haven't thought of, I did think about storing my media queries in a separate file but I was trying to keep everything together and follow the bem methodology.

Answer 1

I prefer the 2nd variant for the following reason: when you have many media queries, indeed, the 1st variant requires less copy/paste.
But though, the code becomes much less readable if you have many elements or modifiers in the block, i.e. selectors. It's common to face a situation when it's needed to change style for several elements/modifiers at exact screen. And when that case appears - as for me - it's easier to navigate between media queries, find the needed media and change code there - so you work at one place in the file, whereas in the 1st variant you would need to jump between selectors. In my opinion when it comes to work with media queries - it's faster to navigate between them, then to navigate between selectors.
imagine the following code with media query inside every selector :
.section_name_educational {
display: flex;
flex-direction: row;
padding: 0px;
.fp-tableCell {
display: flex;
flex-direction: row;
}
.section {
&__inner {
display: flex;
flex-direction: row-reverse;
height: 100vh;
height: calc(100vh - 80px);
box-sizing: border-box;
width: 50%;
padding-left: 40px;
margin-top: auto;
padding-bottom: 40px;
}
&__header {
position: relative;
width: 100%;
top: 62px;
left: 40px;
}
&__text-holder {
width: 100%;
}
&__title {
font-size: 48px;
}
&__subtitle {
width: 150%;
margin: 20px 0px;
}
&__description {
color: #669900;
font-size: 18px;
}
&__primary {
height: 100%;
display: flex;
box-sizing: border-box;
flex-direction: column;
justify-content: space-between;
width: 100%;
}
&__additional {
display: none;
}
&__kettles {
display: flex;
}
&__kettle {
height: auto;
margin-right: 20px;
&_order {
&_1 {
width: 183px;
min-width: 183px;
max-width: 183px;
}
&_2 {
width: 108px;
min-width: 108px;
max-width: 108px;
}
&_3 {
width: 127px;
min-width: 127px;
max-width: 127px;
}
}
}
&__background-holder {
overflow: hidden;
max-height: 100vh;
}
&__background {
position: relative;
width: auto;
height: 100vh;
}
}
}
#media all and (max-height: 600px) {
.section_name_educational {
.section {
&__kettle {
&_order {
&_2 {
width: 68px;
max-width: 68px;
min-width: 68px;
height: 120px;
margin-left: 30px;
}
&_3 {
width: 78px;
max-width: 78px;
min-width: 78px;
height: 120px;
}
}
}
}
}
}
#media all and (max-height: 760px) {
.section_name_educational {
.section {
&__header {
top: 40px;
}
&__subtitle {
width: 100% !important;
}
&__additional {
display: none !important;
}
}
}
}
#media (--large) {
.section_name_educational {
.section {
&__subtitle {
width: 120%;
}
}
}
}
#media (--xlarge) {
.section_name_educational {
padding-top: 120px;
.section {
&__inner {
height: calc(100vh - 60px);
margin-top: 0;
}
&__header {
transition-delay: 1s;
opacity: 0;
right: -100px;
bottom: -40px;
transform: translateY(20px);
}
&__subtitle {
width: 120%;
}
&__primary {
width: calc(100% - 160px);
}
&__additional {
display: flex;
flex-direction: column;
justify-content: space-between;
}
&__bubbles {
display: block;
position: relative;
top: 40px;
width: 160px;
min-width: 160px;
max-width: 160px;
height: auto;
transform: translateY(20px);
opacity: 0;
transition-delay: 1s;
}
&__kettle {
opacity: 0;
transform: translateY(20px);
transition-delay: 1s;
}
}
&.active {
.section {
&__header {
transition: opacity 1s ease-out 0.8s,
transform 0.8s ease-out 0.8s;
opacity: 1;
transform: translateY(0px);
}
&__kettle {
opacity: 1;
transform: translateY(0px);
transition: opacity 0.6s ease-out,
transform 0.6s ease-out;
&_order {
&_1 {
transition-delay: 1.6s;
display: block;
}
&_2 {
transition-delay: 1.9s;
}
&_3 {
transition-delay: 2.1s;
}
}
}
&__bubbles {
transition: opacity 0.8s ease-out 2.5s,
transform 0.8s ease-out 2.3s;
transform: translateY(0px);
opacity: 1;
}
}
}
}
}
#media all and (min-width: 1400px) {
.section_name_educational {
.section {
&__header {
left: 60px;
}
&__subtitle {
width: 110%;
}
}
}
}
#media (--xxlarge) {
.section_name_educational {
.section {
&__primary {
width: calc(100% - 148px);
}
&__subtitle {
width: 80%;
margin: 40px 0px;
}
&__description-inner {
width: 60%;
}
&__bubbles {
width: 148px;
min-width: 148px;
max-width: 148px;
top: 40px;
}
}
}
}
#media (--monster) {
.section_name_educational {
.section {
&__primary {
width: calc(100% - 227px);
}
&__header {
left: 200px;
top: 150px;
}
&__title {
font-size: 58px;
}
&__subtitle {
font-size: 24px;
width: 80%;
}
&__description {
font-size: 24px;
}
&__bubbles {
width: 227px;
min-width: 227px;
max-width: 227px;
left: 0px;
}
}
}
}
As for me - it would be difficult to read it if I had done it with the 1st variant.