Question about the less + BEM preprocessor?

Question

css

The other day I plunged into the world of preprocessors. Googled, read and watched video tutorials but did not find the right answers. I understand that preprocessors are power, for this I am eager to learn and use them)
The following points are of interest:
1) Imagine that there is a certain base folder

base/                          
    ├── base.less      
    ├── bootstrap-reset.less                  
    ├── fonts.less
    ├── normalize.less

In the base.less file, I have styles for the body, zero padding and margin for input and headings, and so on.
I'm wondering this:
1.1) what if there is only one class with the less syntax in the base.less file and the rest of the classes will be just css. Is this reasonable/correct?
1.2) what if there is no less syntax at all, it will be just css but the less format. An example of this is normalize.less in the bootstrap repository. Why is it in less format if it has pure css? Does it make sense to do the less format and it will have pure css?
2) Question about bam + less.
According to BEM, each block must have its own file. For example navbar.less, header.less, footer.less and so on.
But here is such a moment, what if, say, there are unique pictures and scripts in navbar.less?
Then it will be necessary to create a folder:

components/navbar/                          
    ├── navbar.less      
    ├── navbar.js
    ├── nav-icon-1.png
    ├── nav-icon-2.png

Am I understanding the logic correctly? How convenient and practical is it?
3) Imagine there is a components folder where all our components like navbar, heade, footer, productItem, etc.
are located . But these are components. Where is the best place to store page styles? After all, each page is unique with its own indents and backgrounds.
4) How to write less desktop first on bootstrap grid?
As I understand it, it's better not to touch native bootstrap styles and rewrite them, but to make new media query values ​​with max-width parameters? Will this be called mixin-us? can i have an example?

Answer 1

Prev PS First of all, I really hope you use normalize in your projects
1. You can use pure css in less files, but I doubt you'd be interested in the nesting that less allows you to do.
This less

.footer {
    color: #fff;
    a {
        font-size: 24px;
    }
}

unfolds into this is just an example, I think you understand what the plus of this approach is, and if you still work with &, then in general everything is fine and convenient, as for me. Also, the use of variables and mixins is also very, very sometimes helpful. Bottom line - no one will scold you for having pure css in less files, but strive to learn less and simplify your code, just using the capabilities of less (we hope that a lot will soon be in pure CSS, but we have to live until then) 2..footer {color: #fff;} .footer a {font-size:24px}
Every page is unique - yes, every page has its own components, and that's what makes pages unique. The page is built from the components. No components - no page. If you have one project with many pages, you will in any case have the same (well, or approximately the same) footer, also, perhaps, a menu, a header, and so on. It all depends on the project and parts of each page will be formed from the same blocks, for the styling of which the same .less files will be responsible (well, of course, then everything is collected in one css and how it is responsible for everything, but you understand me, I hope ). And that's why I didn't understand your question. On any page of the project there will be a component that you have already laid out and you just use it again, just copy-paste, and do not type again from 0.
Or are you trying to make some kind of backbone of common components, while constantly working with landing pages of completely different designs? Then your question is understandable and you should not try to drag the same files into completely different projects. Get tired of rewriting all the styles every time. Each project has its own backbone of files that are needed for it. Of course, one, maybe two, or maybe 3 files will be the same on all projects where you have common styles that you always use (for example, I have mixins, buttons, and of course the same normalize)
3.Have you tried adapting pages without bootstrap at all, but just with your hands? Try it, then your question will be solved by itself, otherwise you are trying to load the bootstrap, you will not use it, but upload your final .css file with absolutely unnecessary code that will only take up space.
Also read what are mixins. If you just write it's not a mixin, it's just a media expression. Mixins are a completely different thing. @media (max-width: 767px)