What are some best practices for writing memory-efficient (for the lowest peak memory usage) CSS? I realize this is a broad question, so I have broken it down into two main categories:
- What are 'do's and 'don"t's regarding which CSS properties should be used for what things in what circumstances for the smallest memory usage?
- Are there any 'evil' CSS properties (or classifications of CSS properties like [Please note that the following text contains a random supplementary example that is absolutely not a statement, only an example] the flexbox-related properties) that should be avoided at all costs?
I am creating a project-oriented website where users will be able to create projects with millions of items (DOM nodes) in them, so computer resources have the potential to be scarce.
In response to Caleth's concern of not specifying what CSS memory efficiency means, I will explain what CSS memory efficiency means in the context of this question. CSS memory efficiency refers to reducing the amount of memory CSS has caused the browser to consume for merging (when an element has the same CSS property set more than once, usually in more than one place), drawing, painting, flow-calculating, remerging (when new CSS is thrown into the mix, or old CSS is pulled out), redrawing, reflowing, and thrashing (in the event of the unforeseen) the DOM. In this context, it does not refer to the memory taken up to downloading the web page, rather it is strictly client-side. Nor does it refer to the efficiency of CSS selectors (I can already find plenty of articles on both those two).