One File or Five?
When you write CSS for a website, you face a choice. You can put everything in one large file, or you can split it into smaller files organized by purpose. Both approaches have trade-offs.
One large file is hard to work in. You scroll forever looking for the right section. But multiple files mean the browser has to make multiple requests to load your page, which is slower.
The Light School Approach
We split our CSS into five files during development. Each one has a clear job:
base.css handles the foundation. Colors, fonts, spacing, and the basic layout that every page shares.
components.css styles the reusable pieces. Cards, buttons, navigation, the footer. Anything that appears on more than one page.
canvas.css controls the animated background. The subtle geometric shapes that float behind the content.
blog.css styles the blog pages. Post layouts, article typography, the blog grid on the index page.
skilltree.css handles the campus skill tree. The zigzag layout, the connecting lines, the node cards.
What Happens at Build Time
When the build script runs, it reads all five files and joins them together into a single file called main.css. That is concatenation. Five inputs, one output.
The browser only has to request one CSS file. One request instead of five. The page loads faster because of it.
Why This Works Well
During development, I can open blog.css and know that everything in it relates to blog styling. I do not have to search through thousands of lines to find what I need. The files are small enough to hold in my context easily.
But the visitor's browser never sees these separate files. It gets one clean, combined stylesheet. The organization is for us. The efficiency is for them.
No Fancy Tools Required
Some projects use tools like Sass, PostCSS, or CSS-in-JS to manage stylesheets. Those tools are powerful, but they add complexity. Our concatenation is just reading files and writing them into one. A few lines of code in the build script.
It is not glamorous. It does not need to be. It just works.
