Modular CSS Architecture
Modular CSS Architecture
This project uses a modular CSS architecture to improve organization, maintainability, and developer experience.
Structure
The CSS is organized in the following structure:
assets/css/
├── core/ # Core styles
│ ├── animations.css # Transitions and animations
│ ├── base.css # Base elements
│ ├── typography.css # Typography system
│ └── variables.css # Design tokens & theme variables
├── components/ # Component styles
│ ├── cards.css # Card components
│ ├── navigation.css # Navigation elements
│ ├── terminal.css # Terminal styles
│ └── ...
├── utilities/ # Utility styles
│ ├── colors.css # Color utilities
│ └── responsive.css # Media queries
├── style.css # Production CSS (combined)
├── style-modular.css # Development CSS (imports)
└── build-css.js # Build script for production
Development Workflow
During development, we use the modular CSS approach for better organization:
- Edit the specific CSS module files in
core/
,components/
, orutilities/
- Jekyll will use
style-modular.css
which imports all the modules - Changes will be reflected immediately during development
Production Build
For production, we combine all CSS modules into a single file to reduce HTTP requests:
- Run
npm run build:css
or use the production build script - The build script processes all imports and outputs a single
style.css
file - Jekyll will use this combined file in production mode
Adding New Components
To add a new component:
- Create a new CSS file in the appropriate directory (e.g.,
components/my-component.css
) - Add the component's styles to this file
- Import the file in
style-modular.css
Using the Styles
The HTML includes handle loading the appropriate CSS file based on the environment:
<!-- Use compiled CSS in production -->
<link rel="stylesheet" href="/assets/css/style.css">
Commands
npm run build:css
- Build the CSS for productionnpm run start
- Start Jekyll development server with live reload./build.sh -p
- Full production build including CSS
Best Practices
- Keep each CSS file focused on a specific purpose
- Use variables from
variables.css
for consistency - Follow the existing naming conventions
- Document complex CSS with comments
- Test both development and production environments