Hi,
When it comes to media queries you can have examples like:
:root {
--background-color: #F00;
}
.class {
display: flex;
flex-direction: column;
height: 40em;
justify-content: space around;
color: white;
background-color: var( --background-color );
}
@media screen and ( min-width: 768 ) {
:root {
--background-color: #00F;
}
.class {
flex-direction: row;
height: 20em;
}
}
Now above flex-direction changes to flex-direction: row at 768px. You will not need anything at 1024px unless you have designs on changing the direction again. The background colour changes because of the variable --background-color
You still have the media queries but change what you need to change. Use classes as far as possible. An ID is for something absolutely specific. Classes can be split up to perform fewer operations. You then have more classes, but you have more opportunities to mix and match which leads to smaller CSS files. Take a look at the principles behind Tailwind and Bootstrap.
With regards to moving to a framework. No, not yet. Whilst Frameworks are a desirable part of future employment, vanilla JS is a big part of most of them. You cannot get by in React without it. Get the know the DOM well, and how to manipulate arrays and objects. Keep going through these projects, then revisit your code in 6 months' time. You will note two things, 1: your code now whilst good is probably doing more than it should do; and 2: You will be nothing but heartened with your progress. I have been coding for a while, constant improvement is key and keeps you going.
All the best.
