How can media queries be specified without an id or class?

Question

css

Look, I was told that now it is best to practice writing code without classes, so I did. I specified
each element in the CSS through parent blocks. Example: https://jsfiddle.net/bx33cL1n/
But with this method I can't make media queries because I get an error. What to do? I don’t want to prescribe classes and remake the site ..

Answer 1

Отвечу не совсем на вопрос. Не слушай того человека, который тебе это сказал. Это крайне сомнительный способ что-либо делать и по сути не правильный, да и к тому же бессмысленный, не забивай голову такой фигней, если только начинаешь верстать.

Answer 2

Hmm... what do you plan to do if you need to add some new element somewhere inside the existing ones? Will you rewrite styles? Because in this case, your tag hierarchy chain, written in styles, will go to hell)

Answer 3

https://www.w3schools.com/cssref/css_selectors.asp

Answer 4

In general, now BEM rules, I advise you to get acquainted :)
In BEM, just everything is on classes, and thus we avoid nesting.
The second point, you say that you are writing a media query and an error occurs, they do not work!? Most likely, you use one selector in the main styles, and another, with a lower weight, in the media query. Here, about specificity.
For example, if you write in styles:

div.class-some .wrapper h2 span{
   color: red;
}

Then in the media query, you need to repeat the selector, this will NOT work like this:

@media screen and (min-width: 1200px ){
  .class-some span{
     color: green;
  }
}

It should be like this:

@media screen and (min-width: 1200px ){
  div.class-some .wrapper h2 span{
     color: green;
  }
}

Because in the first case, the weight of the selector is less than in the second, despite the media query.
Did you ask about it?