Almost everyone who has ever built a website has experienced the Bootstrap era. The first time it was introduced, buttons suddenly looked beautiful, tables suddenly had spacing, and the layout on mobile devices suddenly didn't break down – it felt like putting on a well-fitting outfit for the first time. Then, after a while, you realize that everyone's website is wearing the same outfit.
Bootstrap is an MIT-licensed CSS framework that's been used for over a decade, and Google Fonts offers thousands of free fonts; both are shortcuts to quickly making a website look decent. My website uses none of them: no third-party JavaScript, no WebAssembly, no embedded font files, no CDN references, just a single, hand-written CSS. This isn't about being high-minded or trying to be different; it's the result of calculating several specific costs.
Content security policies will become more lenient.
Let's start with the most technical one. A strict CSP looks like this:script-src 'self' ,style-src 'self' ,font-src 'self' ,img-src 'self' In layman's terms, it means "This webpage only trusts content from its own domain." For each third-party source introduced, the corresponding directive needs to list an additional domain; using Bootstrap on a CDN...script-src andstyle-src Both need to be enabled; use Google Fonts.style-src andfont-src They all need to be opened.
The more lenient the policy, the fewer things it can block. The value of CSP lies in its whitelist nature; the fewer items on the whitelist, the fewer things slip through the net. Keeping your own CSS under your own domain allows you to keep those few lines of code tightly controlled. You can think of it as a house key; the more people you give a key to, the harder it is to prove who has been inside.
Obligations of Authorization Statement
The attribution obligations of MIT, BSD, and Apache-2.0 are tied to "distribution software." When a website sends third-party JavaScript to a visitor's browser, it's considered distribution, and theoretically, it should include the program's license and copyright notice. Many people are unaware of this because everyone does it and no one has been sued, but "no one has been sued" and "compliance" are two different things.
If there's no third-party code on the browser side and no backend packages are delivered to the user, this obligation doesn't exist. One less file to maintain, and one less chance of being asked "Did you attach a disclaimer?" in the future. I'm a bit allergic to the idea of being asked in the future; I'd rather do more now.
Visitor privacy
When a visitor loads fonts from Google's servers, their IP address is sent to Google. Your visitor may not even know that they've come across a recipe and incidentally greeted Google. In January 2022, the Munich Regional Court in Germany ruled that dynamically embedding Google Fonts and sending IP addresses to Google without consent violated GDPR.
To use Google Fonts, a safer approach is to download the font files and host them on your own domain. This brings us back to the issue of "licensing embedded font files requires login." (System font stacking)system-ui, -apple-system, "Segoe UI", sans-serif There are no such issues, and the loading speed is zero, which is what the visitor's device already has. It won't be very distinctive, but it will never make the page flash before the font loads.
The sample display materials are not included in the license.
This is something I almost made. I used a free HTML template to decide on the layout. The template itself is commercially usable and modifiable, which is quite generous. However, the photos and illustrations on the showcase page are not within the template's license; they are separate materials, and the template author only used them for demonstration purposes. You downloaded the template, kept those images, and uploaded it, thus using photos from who-knows-who.
By simply borrowing the layout language, rewriting it using your own token and pure CSS, without copying its HTML, CSS, JavaScript, and images, you have no obligation to provide third-party documentation, and you don't need to include a template attribution in the footer. "Borrowing the layout language" means: I see where it places the titles, how the cards are arranged, how much white space it uses, and then I write it myself. It's like looking at a garment's cut, going home, and sewing one yourself—the fabric is your own.
Pure CSS can do more than you think.
大家對純 CSS 的印象還停留在只能改顏色和字體。其實星空背景可以用十幾個 radial-gradient 的光點疊出來，行星弧和軌道環是幾個帶邊框的圓角元素，全部在 style-src 'self' 和 img-src 'self' 底下零成本、零授權義務。頁內錨點和原生的 <details> 在沒有 JavaScript 時照樣可用，鍵盤和螢幕閱讀器的行為是標準的，你不用自己重新發明「按 Enter 展開」這件事。
Structured data is written in the microdata attribute on the tag, without using an embedded JSON-LD script, so CSP doesn't need to create a hole for it. This approach is a bit verbose, as each attribute must be written in its corresponding tag, but once written, it's there and won't disappear because a certain script is blocked.
Mini-drama: Won't this look ugly?
"Won't your website look too basic without frames and fonts?"
"Elegance and ugliness are two different things. The system font is elegant, but it's clear, fast, and works on every device."
"But everyone uses pretty fonts."
"Everyone wears the same brand of clothes. I'm not saying that's bad, I'm saying that's not the only option."
"How much time did you spend writing that CSS?"
"It's much more than just importing Bootstrap. But I know what every line of that CSS does. Of Bootstrap's thousands of lines, I've only used about a hundred. The rest are things I don't know living on my website."
They are still suitable for certain occasions
For internal tools, prototyping, and projects where many people on the team are simultaneously producing pages, Bootstrap truly saves a significant amount of time. For websites where typography is crucial to the brand, building your own clearly licensed font is worthwhile; just remember to log in.
My choice is based on three conditions: "one person maintains it, content is the priority, and the tighter the CSP, the better." The answer will differ depending on these conditions. If you're a team of five working on something that needs to be released within two weeks, please use Bootstrap directly. Don't think that writing your own CSS is superior just because you read this. Sometimes, clothes that fit well are simply bought; there's nothing wrong with that.
Where did that garment come from?
Bootstrap was created in 2011 by two Twitter engineers, Mark Otto and Jacob Thornton. Initially called Twitter Blueprint, it was developed internally to ensure a consistent look for all company tools. After being open-sourced, it became one of the most-starred projects on GitHub and remained so for many years. What it did right was pre-define hundreds of small decisions about "how a webpage should look," allowing engineers without design skills to create aesthetically pleasing content. This value is real, and I don't intend to deny it.
Its fifth version, released in 2021, removed its dependency on jQuery, thus catching up with the times. But its core model remains unchanged: a large set of CSS, a set of JavaScript, and a set of class names that you have to follow. When you use it, you're essentially wearing it.
Google Fonts, launched in 2010, allows any website to load beautiful fonts with a single link tag, the font files coming from Google's servers. It truly made web page fonts a free thing. However, free things always come at a price.
CSP, on the other hand, was promoted by Mozilla around 2012 and later became a W3C standard. Its logic is simple: the webpage declares itself "I will only load things from these places," and the browser blocks the others. It has no animosity towards Bootstrap and Google Fonts; they just happen to be on opposite sides: one side wants to load from many places, and the other side wants to load from very few places.
Three common misunderstandings
The first misconception is that "if you don't use frames, you have to handle all browser compatibility issues yourself." That was ten years ago. Now, mainstream browsers have very consistent CSS support; Grid, Flexbox, and custom properties can all be used directly, and frames smooth out most of the differences for you.
The second misconception is that "system fonts are ugly." System fonts are designed at great expense by each operating system and are the most suitable for their respective platforms. They are not "special," but not being special is not the same as being ugly.
The third misconception is that "CSP is hard to set up." The first version is difficult because you'll find a bunch of things on the website that you don't know where they came from. But that's precisely its value: it forces you to find those things. Once it's set up, every time you add something new, you'll be asked "Where did this come from?", and that's a question worth asking.
A small exercise you can try over the weekend
Open a website you frequently visit, press F12 to access the developer tools, switch to the network tab, and reorganize. Group the requests by domain, and count how many other domains besides the website's own domain are sending you requests. See if there's anything there.fonts.gstatic.com Or a CDN. These five minutes will give you a very specific number of how many places a webpage loads from, usually much more than you think.
Then take any of your own static pages and add a meta tag in the head section.http-equiv Fill in Content-Security-Policy.content filldefault-src 'self' Reorganize the page, open the console, and see how many red lines there are. Each red line represents something loaded from an external source. Try to remove them one by one: change the font to the system font, fetch the CSS from the CDN to your local machine, and move embedded scripts to the archive. When there are no red lines, your page will have reached the state described in this article, and you will clearly understand the cost of each decision.
Postscript
"Sometimes, clothes that fit well are just bought," I added this sentence after I finished writing the whole thing, because I was afraid it would sound like I was implying that writing CSS was superior. No, it isn't. I'm just running a content-driven website by myself, and the circumstances just happened to allow me to make this choice. If I were to work with four people on something in two weeks, I would be the first to say, "Let's use Bootstrap," and then pretend this article was never written. Principles depend on the situation; this is also a principle.
Reference page: getbootstrap.com , fonts.google.com