I’ve finally gotten serious about coding and I’m loving the curriculum as well as the forum!
I am currently building my Responsive Web Design projects and I am having trouble figuring out the best way to order my CSS selectors and properties. I’ve been looking around for guides as well as looking through other projects and so far I can’t make out a definite pattern. Sooooo, I’m finally coming here.
Should I order my CSS like what I have posted below or is it more nuanced than an arbitrary ruleset?
Elements - body / header / footer…
Classes - .blue-text / .thick-green-border…
ID’s - #cat-photo-app / #img-caption
Hopefully, this question makes sense. I am aiming to learn best practices now and not once I have a year of bad coding under my belt.
element styling should just be “all h1 should be X, all p items should be Y”. So just base-level differences from the default. Note there are several resets that do this that are commonly available online, you don’t need to reinvent the wheel. Edit: for example, https://meyerweb.com/eric/tools/css/reset/
apply your styling using classes.
try not to nest classes unless absolutely necessary, eg rather than
.my-section header {}
.my-header .title img {}
.nav-list > li > a {}
this all isn’t 100% foolproof and it can be circumvented a bit, but in general sticking to above will make it easier to style things and avoid 99% of specificity issues.
CSS is very easy to write, and very easy to write lots of. It is ridiculously easy to make errors, ridiculously easy to make a big spaghetti-like mess, and it’s very difficult to maintain. (Works pretty well though.)
BEM naming of classes is useful but it is also very verbose, is helpful but you have to be careful naming. Is worth googling.
In a structure that makes sense to you. Doesn’t matter if it’s top-down or general-to-specific, but in a structure that will allow you to find specific styles quickly and easily.
In a structure that your employer hands you. Many employers have a style guide, or will build one as you develop. Follow that. Other designers having to edit your CSS will thank you.
ive been waiting to see how the professionals do it, but what i came up with at least for right now is at the top of my CSS i put an index that shows the order of each section of CSS as it appears. then, the CSS is broken down into sections such as general CSS (that without classes, or id etc), followed by classes and id’s, then and special sections i want to keep together so that important things are easy to find and cohesive. after that ill put the media queries organized by PX, greatest to least, and imports at the bottom since i dont usually need to change that.
hope that helps, and if you want a link i can give you one to a project that has it like this. good luck
i thought about that but didnt know if i liked it or not, is that how the pro’s do it then? i had just grouped them as i work on them a lot all at the same time and dont get lost scrolling.
A media query allows you to apply some conditional rule based on screen size/pixel density/etc. So eg if you have an element which looks fine at one size but not at another, you add the base rule, then alongside it a media query to modify it. Media queries are for tweaks, and it’s almost always easier to keep those tweaks alongside the elements they are tweaking
gotcha. how i was doing it instead of having each query adjacent to the… lets say class X, it was everything i needed for 400px, to work was all under the 400px media query. so if mobile phone size something was messed up i jump straight to the 400px query and see all its modifying. at any rate, this is why we are here thx!
My personal advice is, once you feel a bit confident in CSS (just a bit) take a look at SCSS which is basically a superset of CSS, I am a big fan of having a clear stylesheet structure myself and I personally find crucial for that using SCSS + BEM, especially in medium/big projects.
