152 lines
4.3 KiB
Markdown
152 lines
4.3 KiB
Markdown
# CSS Modular Structure Guide
|
|
|
|
## Overview
|
|
This guide explains how to migrate from a monolithic CSS file to a modular CSS structure for better maintainability and organization.
|
|
|
|
## New CSS Structure
|
|
|
|
```
|
|
app/static/css/
|
|
├── base.css # Global styles, header, buttons, theme
|
|
├── login.css # Login page specific styles
|
|
├── dashboard.css # Dashboard and module cards
|
|
├── warehouse.css # Warehouse module styles
|
|
├── etichete.css # Labels/etiquette module styles (to be created)
|
|
├── quality.css # Quality module styles (to be created)
|
|
└── scan.css # Scan module styles (to be created)
|
|
```
|
|
|
|
## Implementation Strategy
|
|
|
|
### Phase 1: Setup Modular Structure ✅
|
|
- [x] Created `css/` directory
|
|
- [x] Created `base.css` with global styles
|
|
- [x] Created `login.css` for login page
|
|
- [x] Created `warehouse.css` for warehouse module
|
|
- [x] Updated `base.html` to include modular CSS
|
|
- [x] Updated `login.html` to use new structure
|
|
|
|
### Phase 2: Migration Plan (Next Steps)
|
|
|
|
1. **Extract module-specific styles from style.css:**
|
|
- Etiquette/Labels module → `etichete.css`
|
|
- Quality module → `quality.css`
|
|
- Scan module → `scan.css`
|
|
|
|
2. **Update templates to use modular CSS:**
|
|
```html
|
|
{% block head %}
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/module-name.css') }}">
|
|
{% endblock %}
|
|
```
|
|
|
|
3. **Clean up original style.css:**
|
|
- Remove extracted styles
|
|
- Keep only legacy/common styles temporarily
|
|
- Eventually eliminate when all modules migrated
|
|
|
|
## Template Usage Pattern
|
|
|
|
### Standard Template Structure:
|
|
```html
|
|
{% extends "base.html" %}
|
|
{% block title %}Page Title{% endblock %}
|
|
|
|
{% block head %}
|
|
<!-- Include module-specific CSS -->
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/module-name.css') }}">
|
|
<!-- Page-specific overrides -->
|
|
<style>
|
|
/* Only use this for page-specific customizations */
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- Page content -->
|
|
{% endblock %}
|
|
```
|
|
|
|
## CSS Loading Order
|
|
|
|
1. `base.css` - Global styles, header, buttons, theme
|
|
2. `style.css` - Legacy styles (temporary, for backward compatibility)
|
|
3. Module-specific CSS (e.g., `warehouse.css`)
|
|
4. Inline `<style>` blocks for page-specific overrides
|
|
|
|
## Benefits of This Structure
|
|
|
|
### 1. **Maintainability**
|
|
- Easy to find and edit module-specific styles
|
|
- Reduced conflicts between different modules
|
|
- Clear separation of concerns
|
|
|
|
### 2. **Performance**
|
|
- Only load CSS needed for specific pages
|
|
- Smaller file sizes per page
|
|
- Better caching (module CSS rarely changes)
|
|
|
|
### 3. **Team Development**
|
|
- Different developers can work on different modules
|
|
- Less merge conflicts in CSS files
|
|
- Clear ownership of styles
|
|
|
|
### 4. **Scalability**
|
|
- Easy to add new modules
|
|
- Simple to deprecate old styles
|
|
- Clear migration path
|
|
|
|
## Migration Checklist
|
|
|
|
### For Each Template:
|
|
- [ ] Identify module/page type
|
|
- [ ] Extract relevant styles to module CSS file
|
|
- [ ] Update template to include module CSS
|
|
- [ ] Test styling works correctly
|
|
- [ ] Remove old styles from style.css
|
|
|
|
### Current Status:
|
|
- [x] Login page - Fully migrated
|
|
- [x] Warehouse module - Partially migrated (create_locations.html updated)
|
|
- [ ] Dashboard - CSS created, templates need updating
|
|
- [ ] Etiquette module - Needs CSS extraction
|
|
- [ ] Quality module - Needs CSS extraction
|
|
- [ ] Scan module - Needs CSS extraction
|
|
|
|
## Example: Migrating a Template
|
|
|
|
### Before:
|
|
```html
|
|
{% block head %}
|
|
<style>
|
|
.my-module-specific-class {
|
|
/* styles here */
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
```
|
|
|
|
### After:
|
|
1. Move styles to `css/module-name.css`
|
|
2. Update template:
|
|
```html
|
|
{% block head %}
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/module-name.css') }}">
|
|
{% endblock %}
|
|
```
|
|
|
|
## Best Practices
|
|
|
|
1. **Use semantic naming:** `warehouse.css`, `login.css`, not `page1.css`
|
|
2. **Keep base.css minimal:** Only truly global styles
|
|
3. **Avoid deep nesting:** Keep CSS selectors simple
|
|
4. **Use consistent naming:** Follow existing patterns
|
|
5. **Document changes:** Update this guide when adding new modules
|
|
|
|
## Next Steps
|
|
|
|
1. Extract etiquette module styles to `etichete.css`
|
|
2. Update all etiquette templates to use new CSS
|
|
3. Extract quality module styles to `quality.css`
|
|
4. Extract scan module styles to `scan.css`
|
|
5. Gradually remove migrated styles from `style.css`
|
|
6. Eventually remove `style.css` dependency from `base.html` |