CSS Refactoring

/* ❌ BAD: Same styles repeated 3 times */
.submit-button {
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  background: #3b82f6;
  color: white;
}

.cancel-button {
  padding: 12px 24px;    /* Duplicate! */
  font-size: 16px;       /* Duplicate! */
  font-weight: 600;      /* Duplicate! */
  border: none;          /* Duplicate! */
  border-radius: 6px;    /* Duplicate! */
  cursor: pointer;       /* Duplicate! */
  background: #6b7280;
  color: white;
}

.delete-button {
  padding: 12px 24px;    /* Duplicate! */
  font-size: 16px;       /* Duplicate! */
  font-weight: 600;      /* Duplicate! */
  border: none;          /* Duplicate! */
  border-radius: 6px;    /* Duplicate! */
  cursor: pointer;       /* Duplicate! */
  background: #ef4444;
  color: white;
}

/* ✅ GOOD: One base class, modified with utilities */
.button {
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: white;
}

.button--primary {
  background: #3b82f6;
}

.button--secondary {
  background: #6b7280;
}

.button--danger {
  background: #ef4444;
}

/* Usage in HTML:
<button class="button button--primary">Submit</button>
<button class="button button--secondary">Cancel</button>
<button class="button button--danger">Delete</button>
*/

/* Tools to find unused CSS: */

// 1. Chrome DevTools Coverage Tool
// - Open DevTools → More tools → Coverage
// - Record page load
// - See unused CSS highlighted in red

// 2. PurgeCSS (removes unused CSS automatically)
npm install -D purgecss

// purgecss.config.js
module.exports = {
  content: ['./src/**/*.html', './src/**/*.js'],
  css: ['./src/**/*.css']
}

// Run PurgeCSS
npx purgecss --config ./purgecss.config.js --output ./dist

// 3. UnCSS (scans HTML and removes unused styles)
npm install -g uncss

// Command line
uncss https://yoursite.com > clean.css

/* ❌ BAD: Too specific, hard to override */
#header div.container ul.nav li.nav-item a.nav-link {
  color: blue;
}

body .content .sidebar .widget .widget-content p {
  font-size: 14px;
}

div > ul > li > a.button {
  background: red;
}

/* ✅ GOOD: Simpler, easier to maintain and override */
.nav-link {
  color: blue;
}

.widget-text {
  font-size: 14px;
}

.button {
  background: red;
}

/* Benefits:
- Easier to understand
- Faster to render
- Simpler to override
- Less prone to conflicts
*/

/* ❌ BEFORE: Unclear names */
.box {
  padding: 20px;
}

.box2 {
  background: white;
}

.blue {
  color: blue;
}

/* ✅ AFTER: Clear, descriptive names */
.product-card {
  padding: 20px;
}

.product-card--featured {
  background: white;
}

.product-card__price {
  color: blue;
}

/* ❌ BAD: Same colors repeated everywhere */
.header {
  background: #3b82f6;
  border-bottom: 2px solid #3b82f6;
}

.button {
  background: #3b82f6;
  border: 1px solid #3b82f6;
}

.link:hover {
  color: #3b82f6;
}

/* If you need to change the blue, you have to find all instances! */

/* ✅ GOOD: Define once, use everywhere */
:root {
  --color-primary: #3b82f6;
  --color-secondary: #6b7280;
  --color-success: #10b981;
  --color-danger: #ef4444;
  
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  
  --font-size-base: 16px;
  --font-size-lg: 20px;
}

.header {
  background: var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
}

.button {
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
  padding: var(--spacing-md);
}

.link:hover {
  color: var(--color-primary);
}

/* Change the blue ONCE in :root and it updates everywhere! */