How do you structure your css (media queries)?

I've been building basic websites for a while. Mostly I've been using Ui frameworks, i.e bootstrap, and co. So all i did was change colors here and there. For a while now, I've been trying to find an efficient way to write my CSS with responsive websites in mind. So my goal is to write my CSS either mobile-first ( i usually start with big screens then trickle down) or Large screen first. Often, I find myself over-writing a lot of CSS as well as specificity problems. So How do you structure your CSS? And if possible code snippets are welcomed.

Comments

[Andrew Baisden]

First I do a CSS Reset

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-size: 62.5%;
}

html {
    font-size: 1.6rem;
}

Then I just write pure Vanilla CSS using CSS Grid and Flex Box. They are more than powerful enough frameworks like bootstrap become second choice. I used to use CSS preprocessors like Sass but not anymore I don't think its that essential.

[OhadBaehr]

adopting a css preprocessor can help greatly with ordering as it enables for hierarchy,
it will look something like this:

.main-container{
    background:blue;
    .inner-class{
        width:30px
        height:30px
    }
}

it also enables for other epic stuff, like functions, math operations, mixin and more
personally I'm using less, you can find out more at:
lesscss.org/

personally, I'm trying to avoid using media queries as much as possible, also, using variables can also help alot if you are overwriting

[Stephan Nijman]

Hey Kofi,

If you really want to learn Css i would suggest that you stay away from any frameworks for now. Some of them are really great, but they become much more useful if you learn the underlying language first. I know there are a lot of different opinions about this, so please choose your own path, but this is my advise to you! :)

As for your structure question, I personally write my Css going from reset to generics to very specific selectors. Since you are already using Scss there is a very nice write-up here about architecture: sass-guidelin.es/#architecture

One other "resource" i can recommend if you want to learn more is Kevin Powell. He has a Youtube channel and does a lot of live streaming on Twitch. He is a really good instructor: youtube.com/user/KepowOb

Hope this helps you. If you have any more questions don't hesitate to reach out.

Cheers,

Stephan

[John Peters]

My recommendation is not to use CSS at all, instead use SCSS. The reason is that it allows for the problem of addressability to html element to style very specific things. Once it's learned it is the single best way to go forward in our styling endeavors.

The structural architecture of SCSS is perfect for controlling all styles anywhere on any pages. This solves all specificity issues.

We just switched to SCSS for everything in out Angular project. Angular uses both global styles and component styles which are "encapsulated". Stuff that took days to figure out is now literally 5 minutes. We just right click on the element to style and look at the html hierarchy which we duplicate in SCSS. The only issues are when the HTML structures change. So we try to get smart about that and focus on small HTML Parts instead of huge monolithic things.

Also we converted to using only grid, which has massively simplified our styling.

[Kofi A.]

Thanks for this, i also use scss for which is compiled to css. My headache is with media queries. how do you tackle that?