Does BEM file structure slow down css?

Question

Client side optimization

Hello, I use the BEM classification, but usually I write css code in one file, since the sites are small, but now I was making a large site and used the BEM file structure for convenience. The structure helped me navigate quickly, but then I noticed that the css file slowed down due to the huge number of imports in the files (I'm not sure, but I think this is the problem), the site speed dropped to 60+ on PC, then I decided to move all the code to check one file and the speed increased to 99 on page speed. Is it even worth using a structure like this if it slows down the site?

Answer 1

Nobody uses the original file structure directly.
Look at any frontend asset builders, webpack in the first place. Their task is to take all the source files and form asset bundles that are optimal for uploading to a real site.
Those. in other words, you can have any structure in your source code that allows you to write maintainable code, and then the mechanisms that prepare really usable data from it should come into play.

Answer 2

To work on BEM , preprocessors are usually used, for example Sass.
Firstly , they allow you not to write block prefixes in each class (which happens according to the BEM class naming methodology )
And secondly , with regular CSS imports, each import calls the server, which reduces the download speed (as it was by you noticed). Preprocessor imports at the assembly stage collect all your individual files into one CSS, which you include in the document