{"id":17170,"date":"2012-06-14T12:50:17","date_gmt":"2012-06-14T19:50:17","guid":{"rendered":"http:\/\/css-tricks.com\/?p=17170"},"modified":"2016-09-21T06:24:19","modified_gmt":"2016-09-21T13:24:19","slug":"one-two-three","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/one-two-three\/","title":{"rendered":"One, Two, or Three"},"content":{"rendered":"

That’s how many CSS files should be loaded on any website.<\/p>\n

<\/p>\n

One<\/h3>\n
\n
A one-page site.<\/li>\n
A fairly simple site with just a couple of pages that aren’t too different.<\/li>\n
A blog or blog-like site, where even if there are 1000’s of pages and taxonomies, they look mostly the same.<\/li>\n<\/ul>\n
$\"\"$
Obviously, a one page site needs only one CSS file. Any more would be for you, not for the site.<\/figcaption><\/figure>\n
$\"\"$
A site with only a few pages likely only needs one CSS file. Even if it has a few pages with different template, as long as those templates are fairly similar it can be all rolled together.<\/figcaption><\/figure>\n
\n $\"\"$
Even sites with hundreds or thousands of pages can often get away with a single CSS file if the pages are largely the same. Even if there are various taxonomies, like a typical blog.<\/figcaption><\/figure>\n
Two<\/h3>\n
\n
A web app with a global set of design patterns, and then lesser-used design patterns on different sections of the site.<\/li>\n
Content heavy site with a global set of structure, grid and typography and then additional CSS loaded for specific sections of site that need more.<\/li>\n
Sites where every page is very unique (global and page-specific CSS).<\/li>\n
Most sites.<\/li>\n<\/ul>\n
$\"\"$
A web app with different rather “siloed” sections probably need two CSS files. One global with the most common design patterns and then a section-specific CSS file with the less common design patterns that section needs.<\/figcaption><\/figure>\n
$\"\"$
Sites with many vastly different styles of pages likely need two stylesheets. A global (there are probably some<\/strong> shared elements) and a CSS file specific to the unique pages.<\/figcaption><\/figure>\n
Three<\/h3>\n
\n
Very complex sites that need global CSS, section-specific CSS, and one-off page CSS<\/li>\n<\/ul>\n
$\"\"$
Sites that have distinct sections and then sub-templates of that section probably need a global, a section-specific, and a page-specific or one-off CSS file.<\/figcaption><\/figure>\n
I’m proposing that three is the most CSS files that any page needs.<\/p>\n
This is deployed CSS<\/h3>\n
When I say one, two, or three, I’m talking about CSS files linked to from the head of deployed websites. I’m not talking about the CSS files you edit as a developer. For that, you should work in whatever modular chunks make sense to you. Then those modular chunks get combined into the final set of deployed files. You can do this with things like the Rails Asset Pipeline<\/a>, using a CSS preprocessor, or with apps like CodeKit<\/a>.<\/p>\n
For instance:<\/p>\n
Global<\/strong> = main.css + grid.css + typography.css + buttons.css + print.css
\nSite section A<\/strong> = tabs.css + editor.css
\nSite section B<\/strong> = forms.css + video.css + details.css<\/p>\n
What gets loaded on “editor” part of site = global.css & site-section-a.css
\nWhat gets loaded on “details” part of site = global.css & site-section-b.css<\/p>\n
Isn’t one always better?<\/h3>\n
No. If you are thinking of creating a page-specific CSS file and somehow concatenating the parts it needs into that single file, don’t. It seems like, hey, one request is better than three! But then you aren’t leveraging the browser cache at all. <\/p>\n
Let’s say you are in a typical two-stylesheet scenario. As you browse around within a particular section of a site, all those page loads after the first need to load no CSS files at all, as they are already cached. And even jumping into a new section will only need to load one new file (the global is already cached).<\/p>\n
If you make a unique CSS file for each page, users will need to request a new stylesheet for each page they visit. <\/p>\n
OK<\/h3>\n
Now you can troll me for oversimplifying things. =)<\/p>\n","protected":false},"excerpt":{"rendered":"
That’s how many CSS files should be loaded on any website.<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"categories":[4],"tags":[],"class_list":["post-17170","post","type-post","status-publish","format-standard","hentry","category-articles"],"acf":{"show_toc":"No"},"share_on_mastodon":{"url":"","error":""},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":2386,"url":"https:\/\/css-tricks.com\/unique-pages-unique-css-files\/","url_meta":{"origin":17170,"position":0},"title":"Unique Pages, Unique CSS Files","author":"Chris Coyier","date":"March 16, 2009","format":false,"excerpt":"I received a question the other day from someone who was curious how I handle multiple different page styles and layouts across one site with CSS. It's a very common scenario I think. For example, you have a homepage that is different from your blog post pages that is different\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/cssheirarchy.png?resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/cssheirarchy.png?resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/cssheirarchy.png?resize=525%2C300 1.5x"},"classes":[]},{"id":272961,"url":"https:\/\/css-tricks.com\/one-offs\/","url_meta":{"origin":17170,"position":1},"title":"One-Offs","author":"Chris Coyier","date":"July 2, 2018","format":false,"excerpt":"There is this sentiment that you don't design the homepage of a site first. For most sites, it's an anomaly. It's unlike any other page and not something to base the patterns you use for the rest of the site or help inform other pages. You might call it a\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/06\/components.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/06\/components.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/06\/components.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/06\/components.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/06\/components.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":161,"url":"https:\/\/css-tricks.com\/what-is-the-ideal-page-size-for-quick-loading-pages\/","url_meta":{"origin":17170,"position":2},"title":"What is the Ideal Page Size for Quick Loading Pages?","author":"Chris Coyier","date":"November 6, 2007","format":false,"excerpt":"First of all, what is \"Page Size\"? Page size refers to the sum of all the elements it takes to render your page. That includes the HTML file, the CSS files, the images, the scripts, the multimedia...everything. Generally speaking, you should target 200k for your total Page Size. Also important\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":7248,"url":"https:\/\/css-tricks.com\/the-cms-analogy\/","url_meta":{"origin":17170,"position":3},"title":"CSS is to HTML as a CMS is to\u2026\u00a0HTML","author":"Chris Coyier","date":"August 28, 2010","format":false,"excerpt":"From the desk of important beginner concepts: You have a website with 100 pages on it. All 100 pages use the same style.css file. You'd like to change the background color of every single page. You make one adjustment in the CSS file, and that background color adjustment will be\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":8225,"url":"https:\/\/css-tricks.com\/why-use-classes-or-ids-on-the-html-element\/","url_meta":{"origin":17170,"position":4},"title":"Why use Classes or IDs on the HTML element?","author":"Chris Coyier","date":"January 2, 2011","format":false,"excerpt":"Reader Nicolas writes in: I'm frequently seeing ID and class specifications to and elements. I'm curious as to why one would do this? If it is unique to either element, then why not specify body or html in the CSS? I believe what Nicolas is asking is why would you\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/01\/Multiple-HTML.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":80,"url":"https:\/\/css-tricks.com\/learning-csshtml-start-with-static-or-dynamic\/","url_meta":{"origin":17170,"position":5},"title":"Learning CSS\/HTML, Start with Static or Dynamic?","author":"Chris Coyier","date":"September 7, 2007","format":false,"excerpt":"The Graphic Design Blog asks an interesting question about advice for beginners on learning CSS\/HTML: Should newbies learn static or dynamic web design? The obvious conclusion would be 'you gotta learn to walk before you can run', but this isn't necessarily true anymore on the web. It is a fairly\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_sharing_enabled":false,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/17170","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=17170"}],"version-history":[{"count":11,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/17170\/revisions"}],"predecessor-version":[{"id":245762,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/17170\/revisions\/245762"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=17170"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=17170"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=17170"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}