Hello, I would love some feedback to my third project.
https://codepen.io/dylluangromlin/full/omdWPZ
At this point I have a feeling of losing control over my CSS code. Does someone have good source to learn any method to keep it neat? I heard of BEM, DRY, CSS variables and preprocessors but reading about it just leaves me confused where to start.
Thank You for your time.
The only things I’ll point out is that the footer should be full width and the navbar elements lay over the page specific content when on small screen. Other than that, good work!
When it comes to your CSS, I like to have it in the same order as the elements would appear on the page. I keep general classes and elements on the top.
If your CSS file is too big, I suggest using multiple CSS files, split by their major function. By that, I mean imagine you were using a template tool of some sort to generate your HTML: you might have a separate template for overall layout, one for broad sections, one for individual articles, and so on. You’d split your CSS up the same way. If you have CSS that defines a “theme”, then you might want that in a separate file too (which makes it easy to switch themes)
Other approaches to splitting I’ve seen are to put cosmetic info (read: colors and fonts) in one file, and layout in another.
When using a framework like Angular or React, you get CSS Modules, which really helps out in organization, since your CSS is split up for you, one CSS file per component. In my plain vanilla HTML projects, I just use one big CSS file, but my IDE (IntelliJ) helps me out as far as navigating it goes, since I can zap to any class with a cmd-click.
Thank You for answer! Footer done and navbar done. Navbar mistake was actually result of mentioned chaos in CSS - I forgot to change selectors in media query. Oh irony 
Thank You for great insight!
I will try template idea when writing CSS longer than this one.
It’s also good to know there will be more solutions in JS frameworks or IDE.
Just to be clear, I don’t recommend actually using a template system (like Jade or Mustache) to generate your CSS files, but just to split up the CSS files as if you were splitting up templates. If you are in fact using a template system and have things all nice and modular, then you might want to just put the relevant CSS inside <style> tags right next to the HTML.
Always happy to help!