README

Project documentation and guidelines

Project Overview

This project demonstrates a custom CSS architecture with modular organization and consistent naming conventions. It's designed to be scalable, maintainable, and optimized for large projects.

Getting Started

# Clone the repository
git clone https://github.com/username/project-name.git

# Navigate to the project directory
cd project-name

# Install dependencies
npm install

# Start the development server
npm run dev

Project Structure

project-name/
├── app/                # Next.js App Router pages
│   ├── about/
│   ├── career/
│   ├── contact/
│   ├── docs/
│   ├── get-started/
│   ├── method/
│   ├── pricing/
│   ├── readme/
│   ├── customers/
│   ├── layout.tsx      # Root layout
│   └── page.tsx        # Home page
├── components/         # React components
│   ├── layout/         # Layout components
│   ├── pages/          # Page-specific components
│   ├── ui/             # UI components
│   └── theme-provider.tsx
├── styles/             # CSS files
│   ├── pages/          # Page-specific styles
│   ├── buttons.css
│   ├── colors.css
│   ├── forms.css
│   ├── globals.css
│   ├── layout.css
│   ├── reset.css
│   ├── theme-toggle.css
│   └── typography.css
└── public/             # Static assets

CSS Naming Convention

This project uses a unique naming convention for CSS classes to prevent conflicts and improve maintainability:

.componentName__elementName__RandomSuffix {
  /* CSS properties */
}

For example: .button__root__ZxcvB, .typography__heading1__T3m8s

Theme System

The project includes a light and dark theme system using CSS variables. Colors are defined as RGB values for flexibility with opacity:

/* Definition */
:root {
  --color-bg-primary: 251, 251, 251;
}

/* Usage */
.element {
  background-color: rgba(var(--color-bg-primary), 1);
}