What methods and techniques of web-layouts do you use?

Everyone knows that layout is the most time-consuming, tedious, creative and situational process. Someone is building a pile of crutches, to live to please in throws layouts, someone sculpts styles directly in inline-style property, thinking that he's got the styles and layout in one file to not have the cereal in style.css file (in this case in style.css were only some common elements); someone who does modular layout like BAM , for example, and someone just uses bootstrap and him coding the actual top of the mountain (well, until you meet the real layouts)

As for me, I use some particle of BEM methodology (from yandex, it's not advertising) -- > describe independent blocks and elements inside them and then apply modifiers there to change the color or size (padding, width). If you need to adjust the position of the element (margin, float, display, etc.), then I use two styles -- > navbar (as general styles for the component) and header _ _ navbar (where I will adjust the margin or width, if it is set as a percentage)

At the very least, I use the inline property style, so as not to produce sooo many blocks or elements and their modifiers However, in this case, I still get porridge and it is not quite convenient to maintain it, just time passes, or in the development process I forget what the default block looks like and start producing modifiers to customize the appearance. Accordingly, after I start to forget what a particular block/element looks like, I simply lose all desire to work on the project further and keep it all in my head.

I understand that the preprocessor (e.g. Sass) will save the situation and allow the styles of the independent components to keep in one place, but what about the fact that I forget, how this or that independent component or the element --> okay, even when elements or components tens, and when rolled over a hundred already such a mess begins in the mind.

I think to make up separate pages, where I will have all the independent components and elements -- > for example, as it is done in UI / UX design (actually, I also do design), there is a separate ArtBoard for components and it is very convenient to work with them, even when there are a lot of them.

Could you share your thoughts and suggestions on this matter? After all, every chef has their own approaches and techniques.

For the layout, I use twelve columns (in the design) and I just take the same grid from bootstrap (just the grid)