How to organize writing css?

Question

css

Good day to all. I've been typing for two years now, I have a small portfolio, I can do a lot of things... but what I still can't come to is the organization of my CSS code. I get a binding to the HTML structure, i.e. at the top css start at header and down to footer. But it seems to me not very modern and adapted to work in a team.
I read a lot about code organization methodologies like BEM, atomic CSS, SMACSS. But I can’t really get into them how they all share this. I read a lot of comments and watched someone else's CSS in which, for example, people first describe the appearance of buttons, set colors with variables ... I
also read that it is more correct in css to separate the design and arrangement in styles, i.e. color: ... separately, and position: ... separate classes.
In general, the essence of the question ... Tell me who writes his css?! Articles, advice, comments, recommendations.
How to get used to linking css to html structure?!

Answer 1

Tell me the best way to make projects. Can you suggest other development approaches?

Which is better - depends on the specific case, but when I was doing layout it looked something like this:
0. We use a preprocessor, some, for example, SASS (SCSS)
1. Thanks to the preprocessor, among other things - You can split style files into an arbitrarily number of these (although I would not do this)
2. CSS (with our approach) could be divided into the following parts:
Regarding files with media queries, in total it looks something like this: first, the layout is done in the base resolution (either "mobile" or "desktop"), and then general styles are written to adapt it, valid for all resolutions, then it is written " layer of adjustments" for each individual resolution (if necessary).
* Above, only our approach to work, developed by us and for our projects, is voiced, it is far from a fact that such an approach will suit you.
Also, I recommend that you familiarize yourself with the list of methodologies(on my own behalf, I want to add to this list that the approach "to shit in HTML code, while creating elements that you can easily do without" - violates the fundamental recommendations of the CSS founders, therefore, in most cases, the methodology that promotes such an approach by us even are not considered).

Answer 2

I read a lot about code organization methodologies like BEM, atomic CSS, SMACSS. But I can’t really get into them how they all share this.

Comes with experience
In short, think of a class name for the block so that it is clear from the name what it does and do not bind the name to the position of the block.
For positioning, use separate classes as a wrapper or as an addition to the block class

Answer 3

You will not be able to decouple the code from the html structure, because they are written for your document. no matter how you would like to see "general" your code.
You can layout in a modular way (in general, BEM implies this), that is, you have a header block - create something like css/header/style.css , js/header/scripts.js and already work in them.
About the buttons. using SASS you will not be able to write styles in a different way, as other people do:
1. the button is written, .button
2. the color classes are written.
In SCSS it looks like this:

.button {
  &__black {}
  &__white {}
}

Actually, you will have one code that sets the button (padding, fonts, etc.), and with additional classes you already describe the color of the button, perhaps also the size, with some kind of .button__fullwidth.
Accordingly, any other similar blocks are written in this manner, after which, if you need to change one, you add an additional class to it, in which you change, for example, the text color and background color.
Generally speaking, I write code differently depending on the complexity of the project. In projects where a large number of user interactions are performed, additional styles need to be written (style for a successful operation, for an unsuccessful one, styles for errors, information fields, etc.). They are all written as described in your button example. After all, you just need to change some parameter in your button description and that’s it, you don’t have to change it everywhere. It's comfortable. Plus, I divide the blocks into modules, where each file is connected from a separate folder. This is useful for structuring code.