CSS started out with very simple intentions, but as table-less web design began to really take a foothold, our stylesheets quickly began to grow in size. Developers tried to break them into smaller documents, but these strategies proved to have serious performance issues. Linking to multiple style-sheets meant multiple server round-trips adding the time it takes for a page to acquire it's necessary resources, not including the time it takes to transfer the data.
It's not entirely uncommon to see multiple links to stylesheets in websites.
<link rel="stylesheet" href="stylesheets/reset.css">
<link rel="stylesheet" href="stylesheets/base.css">
<link rel="stylesheet" href="stylesheets/skeleton.css">
<link rel="stylesheet" href="stylesheets/font-awesome.css">
<link rel="stylesheet" href="stylesheets/buttons.css">
<link rel="stylesheet" href="stylesheets/layout.css">
The practice of importing stylesheets into the one stylesheet linked in the HTML document was adopted by many as shown in this example from the MOZILLA DEVELOPER NETWORK. This technique had many promisses. It not only supported breaking your CSS into manageable documents but it also supported media types.
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);
It's ultimate failure was that this feature has such a negative impact on web page performance, as pointed out by Steve Sounders back in 2009, it's practice was quickly abandoned. Using the link method, the stylesheets are loaded parallel (faster and better). The @import method loads any extra css files one-by-one (slower), and potentially gives you flash of un-styled content.
Looking for new solutions, developers began to adopt the use of CSS preprocessors to manage growing CSS code bases, but sadly didn't change old habits. Still clinging to the practice of creating large documents, many placed mixins and variables at the head of the doc and simply hashed out a bunch of CSS rules in the body. To make matters worse, as the documents began to grow in size, mixins and variables began to show up at random places within the stylesheet.
Realizing the need for better management techniques, many began to break these large stylesheets into smaller documents based on common principles like variables and mixins. Typography, forms and global design soon followed. Sure this reduced file size and increased readability, but without a real strategy this process was easily doomed. As files grew in number, sub-directories quickly gave way to junk-drawers of haphazardly daisy-chained files, filterable only my failed attempts at naming conventions.