How to typeset so that the code does not look like porridge?

Question

css

Hello. Recently, I started to roll into layout, and I ran into a problem that when I type up a more or less large site, the code looks like an incomprehensible mess that is impossible to understand. When I myself return to the previous, already laid out sections in order to correct some trifle, my head just boils, sometimes I change something in the wrong place and the whole section goes in one place. What are the solutions to this problem, what secret solutions do layout gurus use? I can’t believe that this is the case for everyone, so how do you learn to type CORRECTLY?

Answer 1

I am not a layout guru, at first I also had such a problem, I solve it in two ways:
- I separate each section (block) of the site with an indent with a comment, I do it like in html. and in css, it's much easier to find where everything is. Comments are marked in green and therefore it is clearly visible where which block is, I generally do not regret comments, and it looks human and readable, and not all in one pile.
- I give meaningful class names, but as mentioned above, you can use BEM, I personally invent my own classes, but their logic is clear and simple, for example. service-container, service-cards, card-title, card-content, that is, the words "container", "title", "content are always repeated in the layout, only the name of the section changes.
And besides, before starting the layout, I go through the layout and at the beginning of the styles I take out classes with the standard styles of headings, paragraphs, links, in order to avoid code repetition, as a result, the css code becomes much smaller and easier to understand. And in general, do not despair, in principle it is normal that you open files for editing and it is difficult to figure it out at first. because you forget how it was made up, it's the same with me. before I make changes, I first study the structure of the block for 5 minutes. this way you will minimize block shrinkage. Well, don’t forget about the indents from the left edge, this is important, they were not invented in vain)

Answer 2

BEM

Answer 3

Like in popular classic frameworks. Twitter Bootstrap, Uikit, etc.