How to write maintainable HTML and CSS code?

Question

css

One project of mine has entered the stage well described in this question . There are two files named default.css, common.css and a bunch of smaller css files. Chaos reigns within them. Some pages have a separate style block with styles specific to that page. I think you yourself have come across such projects.
Now I plan to develop this project, but with the current mess it is quite difficult to do this - you change something in one place, it breaks in another, and it's just not pleasant to work with such code. Therefore, I made a strong-willed decision to rewrite the frontend from scratch, at the same time I will try my hand, because. Haven't done anything seriously for a long time.
In this regard, the question is - what rules, techniques should be followed in order not to mess up this time and create an understandable and maintainable code? Surely there are some guidelines or articles for people like me. I would appreciate any links and advice.
Thanks in advance for your reply!

Answer 1

Use LESS! Well, or there SASS / SCSS as desired. + Grunt project builder.
This will allow you to split your CSS code into an unlimited number of files and folders. And then Grunt will process all this, collecting all this economy into one file, say style.css.
How convenient is this approach? You will have a css folder in the project directory, inside it there will be other folders or files, such as defaults, header, footer, news, etc. to infinity. Each of these files will contain only the piece of code that is responsible for the block you need. The project in this form is very (!) Convenient to maintain and make changes. In addition, it is convenient to keep the necessary pictures in the same folders next to the desired style file. Let's say in the header folder, there are files: header.less, bg.png, logo.png, etc. Very comfortably.
Here's how it all works:
LESS: www.lesscss.ru
Grunt: gruntjs.com + tutorial: nano.sapegin.ru/all/grunt-0-4 Enjoy
!

Answer 2

Absolutely regardless of the development environment, you should first draw up the structure of the site.
A good project begins with scripts and sketches, that is, with design. If you do not have such a document, then you will have to describe the structure at least at the text level and determine scenario transitions between pages.
After that, you can hang up leaflets with the page structure (or attach in the program that you use - for example, in Mindjet Manager). And the headache from where and what is used will disappear.
And what to use as a development environment and tools for the frontend is generally a secondary issue. Moreover, different companies may have their own set.

Answer 3

It is necessary to approach each project flexibly and proceed from its specifics. If you do not use ready-made methodologies, then I usually look at the prototypes and design of the project and divide them into semantic blocks, they become the foundation for CSS systematization, this solves the problems of "property intersection" and makes it possible to break css using certain logic.

Answer 4

In addition to everything already said.
If the project is dynamic, then definitely LESS. But here, too, you have to be careful. It will be good if you split LESS files into 2 groups.
The first group is responsible for layout, markup, maybe even basic indents. Let's just say that everything that does not create style gets there.
The second group is all the properties that bring beauty: color, background, font-face, ...
Thus, you will get 2 CSS files as an output. One is kind of mandatory and the other is a theme or a skin. Thus, it will be possible to create different skins by controlling the parameters of one file.
An important technique in LESS is the removal of parameters in a separate file that is included in the main file first. for example

@borderRadius: 10px;
@buttonColor: #ff5544;

It is necessary to take out all the settings so that later the creation of a new skin - it was the work of editing only this one file and nothing else.