This article is mostly technical, I recommend it to developers and designers. It will be updated regularly as the process evolves.
Why NPM scripts at first?
There are several build tools (grunt, gulp, broccoli, webpack) often based on NPM packages, they require you to learn a new workflow and setup. With these new tools (and not only), web projects are getting more and more complex, but the majority of websites still remain the same (showcase website, blog, etc.).
NPM script is a complex tool with many centralized dependencies, but it's still simpler than the new build tools. After all, these build tools are based on NPM. I am not a big fan of NPM, it's literally ruining the web, centralization and complexity are never good for the web. All you need is a simple local CSS file management tool. There's no need to use millions of centralized packages.
Personally, I use NPM scripts for some of my projects, but it feels a much too complex for my needs. I'd rather focus on ergonomics and code quality. I haven't found a good local alternative yet, that provides all the possibilities offered by NPM/PostCSS, so changing a mindset is probably the best way to start.
NPM scripts workflow
Please only use this workflow when your project really needs it, better start simple (even boring) and add complexity later. Otherwise, stick to HTML/CSS.
You can find more details about the NPM scripts in the package.json here.
Less dependencies and decentralized alternatives
If there is no internet connection or if NPM packages are inaccessible, NPM scripts cannot be used if I do not have packages installed locally. Even if I have them installed, I need to keep my fingers crossed to have the correct node and NPM version. Sometimes I might happen that the package has been removed, which may break internet. What are the possible alternatives?
It is definitely better to keep the process simple. Without any extra tools, it is possible to split CSS files using CSS import. But, remember not to use CSS import in production, it creates performance issues. A good idea from Hugo Soucy was to use bash tool to combine files. Bash is wildly available and is also a good alternative. Even the catcommand can be used to merge files.
Another option is to use editors packages or extensions. Both Sublime Text and VsCode for example have extensions to minify and merge the files (see the resources).
In this case, it is not possible to access all the optimizations (fallback, prefix, etc.), but it avoids centralization and dependencies.
If really needed, there are online tools that can be used when you have internet access (see the resources).
CSS structure
Planning ahead the HTML/CSS structure during the design phase is probably the best method. It seems obvious, but there is more content on building tools and new trendy frameworks than there is on the good old CSS organization. Following good CSS practices with a well-organized design process and file structure, you can avoid a cluttered CSS. A good code quality does not require removing unused CSS and using critical CSS. CSS fallback and browser support can still be an issue, but can be avoided by writing CSS from scratch.
A good advice from Devine Lu Linvega is to keep a CSS file under 100 lines. For many,this seems to be an extreme, but for "low-tech" or experimental project, it is a key solution. Even a greater limit can be a really good practice to avoid clutter CSS files. We will try this method soon on our side projects. Setting a weight limit for CSS might also be a good idea. CSS methodologies can be really helpful in organizing CSS classes.
A well-structured and planned web design gives the freedom to reduce the dependencies to complex tools and enables to write simple CSS, well-organized and fast to load. Start small, without any build tools.
If you are familiar with other NPM alternatives, less complex, please do not hesitate to share them with us.
We are constantly improving our workflow to make our technological process less complex, but more socially focused.
Resources
NPM scripts
Build tools
- Building a Dependency-free Site in 2019
- NPM is ruining the web
- Boring by default
- How one programmer broke the internet by deleting a tiny piece of code
Unix/Bash tool
Code editors tools
CSS online tools
CSS methodology