When setting up web pages, every millisecond you can shave off the loading time counts. When you use CSS the right way, it doesn’t add to the loading time.
I misunderstood the 14 KB limit until I realized it’s 14 KB after the server compresses it. I tested my longest article and the compressed version is well under 14 KB. Certain non-article pages are over that limit and I don’t really care. The articles are the most important pages.
There are three ways to work with styles: An external style sheet, an internal style sheet (within the HTML “style” tags) and inline styles (style=”border:0”, for example). You can use any or all of them with regular web pages. With AMP, you’re only allowed to use internal style sheets. That is, unless the external style sheets are whitelisted by the AMP Project. I use these and they’re whitelisted:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=[your font]"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
I used some inline styles until I started working on my AMP. Today, I replaced the external style sheet for my regular pages with an internal style sheet, minified. Even with that code added to my longest article, it still doesn’t reach 14 KB. You can test any page here.
For my website, an internal style sheet is the right way. Today, that is. Who knows what things will be like in 10 years? When the technology companies decide to stop milking their cash cows, some things won’t matter anymore.
I won’t know if changing my CSS will visibly speed things up for my visitors. I know it will be easier for me to update it. The expire headers for my HTML pages is one hour. The external style sheet expires at “max” (which is more than a month if I remember correctly).