CSS modularization
involves breaking down a large CSS file into smaller, more specific files, each focusing on a particular component or feature of the website. This helps to improve maintainability, scalability, and organization of the codebase. Common techniques for CSS modularization include BEM (Block Element Modifier), SMACSS (Scalable and Modular Architecture for CSS), and OOCSS (Object-Oriented CSS).
CSSProject build/compile tools
Packages- Compiling:
- Convert React, JSX, and TypeScript code
- unsupported syntax
- Postprocess Less/SASS.
- Polyfill
- not widely supported build-in functions
- Minifying:
- Remove spaces and use shortened variable names.
- React, JSX, TypeScript convert to js
- Bundling
- Bundlers require creating a dependency graph for an entry point into the code, usually
index.js. They then work backwards, looking for everything thatindex.jsdepends on, and everything that those dependencies depend on, and so on. Finally, they bundle all that into a single output file that can be shipped to the browser.
- Code splitting
- Split codes into small pieces and loading when needed.
Deno and Fresh prefer a on-demand building, which mean that when a request comes into the server, Fresh renders each page on the fly and sends only HTML
