What sequence of style definitions to follow?

Question

css

Stage 1. Create HTML markup.
Stage 2. Defining CSS styles.
Stage 3. js.
With the first and third stages, somehow there are no questions. And the second causes a bunch of ambiguous thoughts. In the process, there are nuances that could not be determined at the design stage and, as a result, porridge in CSS, code that is difficult to maintain due to the fact that you have to drive in crutches. What logic or sequence of actions should be present in the process of defining styles in order to use fewer crutches?

Answer 1

Use a preprocessor, name everything according to BEM (although this is not for everyone), all components according to different files, to build grunt / gulp. You can peep how it's done in Bootstrap .
So it's a shitty design. It is impossible to write styles once that will adapt to all emerging new conditions. All this had to be foreseen in advance. Something was not foreseen - learn from the lessons and review the entire logic of styles or individual components.
It is clear that situations are different, for example, a project can be long-term, something is constantly being supplemented, changing. The general idea of ​​how to proceed here is to break everything into separate components (blocks), to minimize their dependencies. It will be much easier to rewrite the code of a single component than the entire code.