Organizing CSS for Large Projects

Managing a large CSS file gets tricky fast as projects — and stylesheets — grow. In this piece I'll share a few habits for keeping CSS neat, easy to follow, and maintainable. It starts with one thing: a sensible folder structure.

1 · Folder structure

A good structure makes it obvious where the styles for any component or layout live. Here's the shape I reach for:

Treecss/
├─ base/
│  ├─ reset.css
│  └─ typography.css
├─ components/
│  ├─ button.css
│  ├─ dropdown.css
│  ├─ textfield.css
│  └─ modal.css
├─ layout/
│  ├─ navigation.css
│  ├─ header.css
│  ├─ footer.css
│  └─ sidebar.css
├─ utils/
│  ├─ variables.css
│  └─ utilities.css
├─ vendors/
│  └─ bootstrap.min.css
├─ pages/
│  ├─ login.css
│  └─ contact.css
└─ main.css

2 · Base folder

The foundation. Resets and global typography live here; everything else builds on top and can override when needed.

base/reset.csshtml {
  box-sizing: border-box;
  font-size: 16px;  /* base for rem units */
}
*, *::before, *::after { box-sizing: inherit; }
body, h1, h2, h3, h4, h5, h6, p, ol, ul {
  margin: 0;
  padding: 0;
  font-weight: normal;
}
ol, ul { list-style: none; }
img { max-width: 100%; height: auto; }

base/typography.cssh1 { font-size: 4.4rem; }
h2 { font-size: 2.6rem; }
h3 { font-size: 1.8rem; }
p { font-size: 1.3rem; letter-spacing: 0.02rem; }

3 · Components folder

Everything reused across pages — buttons, text fields, modals, dropdowns. One file per component keeps concerns isolated.

components/button.css.btn {
  display: block;
  color: black;
  border-color: transparent;
}
.btn:disabled, .btn.disabled { pointer-events: none; }
.btn--primary { background: blue; color: white; }

components/modal.css.modal {
  display: none;            /* hidden by default */
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: auto;
  background-color: rgba(0,0,0,.4);
}
.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  width: 80%;
}

4 · Layout folder

The big reusable regions of the site — header, footer, navigation, sidebar.

layout/navigation.css.nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}
.nav-links li { margin-left: 20px; }
.nav-links a { color: #333; text-decoration: none; }
.nav-links a:hover { color: blue; }

5 · Utils folder

Design tokens and reusable utility classes. Centralizing variables here means a theme change is a one-file edit.

utils/variables.css:root {
  --color-blue: #0d6efd;
  --color-purple: #6f42c1;
  --color-pink: #d63384;
  --font-primary: 'Inter', sans-serif;
  --spacing-md: 4.5rem;
}

utils/utilities.css.hidden { display: none; }
.mt-5 { margin-top: var(--spacing-md); }
.bg-blue-100 { background-color: #10a7e8; }

6 · Vendors folder

All third-party CSS — Bootstrap, Foundation, and friends. Keeping them here draws a clear line: this isn't my code.

vendors//* bootstrap.min.css — minified framework CSS */
/* foundation.min.css, swiper.min.css, etc.   */
/* nothing here should be hand-edited.         */

7 · Pages folder

Styles unique to a single page — login, contact, and so on. Named for their content so they're easy to find.

pages/login.css.login-form {
  display: flex;
  flex-direction: column;
  padding: 10rem 8rem;
  box-shadow: -0.5rem 0 4rem 0.5rem rgba(0,0,0,.5);
}
.login-logo { height: 5rem; margin-bottom: 2rem; }

8 · main.css

The conductor. It imports everything in a deliberate order — vendors and base first, then layout, components, pages, and utilities last so utility classes can win specificity ties.

main.css/* vendors */
@import './vendors/bootstrap.min.css';
/* base */
@import './base/reset.css';
@import './base/typography.css';
/* layout */
@import './layout/navigation.css';
@import './layout/header.css';
@import './layout/footer.css';
@import './layout/sidebar.css';
/* components */
@import './components/button.css';
@import './components/textfield.css';
@import './components/modal.css';
/* pages */
@import './pages/login.css';
/* utils */
@import './utils/variables.css';
@import './utils/utilities.css';

Wrapping up

A clear structure won't write your CSS for you, but it will make every future edit faster and less stressful. Group by responsibility, keep one concern per file, and let main.css stitch it together. Happy reading!