Do I need to use CSS preprocessors?

Question

css

I haven't visited the toaster for a long time, and suddenly I came across a question about CSS preprocessors. It became interesting - what kind of animal.
I read several sites with a description of what it is and why. Looked at examples. But I did not understand - why? What's the point?
The gist of my question is:
1) Preprocessors allow you to introduce variables and mixins. But in CSS you can just create a property

.hello {
color:red;
font-size: 11px;
}

and apply it to all elements where needed.
What's the difference - to enter in HTML or use a variable in the style file, which will also have to be added to some desired type of object? I don't understand at all. 2) Validity of CSS. The preprocessor compiles your "pretty sugary" syntax into valid CSS. What is the difficulty in writing valid CSS right away? It's also not entirely clear. 3) Compiler from preprocessor language to CSS. Well, this is an additional tool! What for to fence something else if everything and so without any compilations works. A bunch of programs on the computer is also superfluous. 4) Readability of the code, and easy search,
<a href="\" class="oneclass hello">hello</a>



Well, I don't get it either. Any normal code editor can bring all the indents, etc., by pressing a hot key. in order. The code becomes beautiful and readable. Yes, and I don’t understand - what can be unreadable in CSS? There is a class, and in curly brackets - properties. What could be unreadable here?
Search - too I do not see complexity. In the browser - F12, it will build a beautiful tree of elements with their styles, and each style line has a file and a line in which this property is specified. You can even click with the mouse, and a window will open with the specified file and the search string.
5) Ability to include (include) in preprocessors.
You can also include the necessary CSS in the HTML file via link rel=... . Why is an include in preprocessors more convenient than this standard feature?
Created a couple of CSS files, and put them in the HTML where you need them. In the admin panel - one, in the guest book - another, in the photo album - the third, or mix if necessary. After all, if you call the element classes wisely, then no intersections will work, and everything will work.
6) Nesting properties.
I don't understand how code like this:

.block {
.sub_block {
color: red;
}
}

more readable than regular CSS: 7) On Habré I saw a discussion in the comments, they say you can even set in preprocessors - which browsers to support. Achtung! Why write styles that won't work in older browsers? PS In no way am I criticizing new directions, but I just didn’t study anything new, I don’t use frameworks, because everything works fine anyway. I can assume that I had such a situation due to the fact that I mainly write small projects, and in large projects it really helps somehow, but I can’t imagine such a situation.
.block > .sub_block {color:red;}

Answer 1

only the first paragraph is sufficient.
when you want to play around with fonts, colors, sizes and have to run through the entire file or files to change them, instead of editing variables in one place.
2) about nothing.
3) with the current volumes of disks and the size of these same compilers, it makes no sense to talk about this.
5) includes in the preprocessor make it possible to split the entire css into separate small and logical files that are easier to work with, and at the end they will be merged into one file, and not n different ones in the case of link rel . this is good in terms of client-side optimization, although it is not critical for hamsters. whether you need it or not - decide for yourself.
Of course, there is no magic in preprocessors, and you can do without them. but they make your job easier and more productive.