# Skill: Frontend Styling (SCSS)

## Identity
- **Skill ID**: `frontend-styling-scss`
- **Domain**: Frontend SCSS Styling
- **Technologies**: SCSS (Dart Sass), BEM Methodology, CSS Grid/Flexbox
- **Source Agent**: `frontend-styling-expert.md`

## When to Load This Skill
- Task involves CSS/SCSS styling
- Implementing dark mode
- Building responsive layouts
- Working with design settings (padding, styling)
- Files matching: `assets/css/**/*.scss`, `admin/src-vanilla/css/**/*.scss`

## Core Patterns

### WordPress.org Naming (4+ Characters REQUIRED)
```scss
// CORRECT - WordPress.org compliant
$presszone-international-primary: #1f71dd;
.presszone-international-btn { }
@keyframes presszone-international-fade-in { }

// FORBIDDEN - Will cause plugin rejection
$pz-primary: #1f71dd;  // TOO SHORT
.pz-btn { }            // TOO SHORT
```

### Hybrid Architecture (SCSS Vars + Class-Based Theming)
```scss
// 1. Define primitives in _variables.scss
$gray-900: #131314;
$white: #ffffff;

// 2. Create theme maps
$themes: (
    'light': (
        'bg-primary': $white,
        'text-primary': $gray-900
    ),
    'dark': (
        'bg-primary': $gray-900,
        'text-primary': $white
    )
);

// 3. Use theme-props mixin in components
.presszone-international-card {
    padding: 1rem;

    @include theme-props((
        'background-color': 'bg-primary',
        'color': 'text-primary'
    ));
}
```

### Dark Mode with Nested Selectors
```scss
// CORRECT - Dark mode MUST use nested .dark-mode &
.presszone-international-widget {
    background: $presszone-international-surface;
    color: $presszone-international-text;

    .dark-mode & {
        background: $presszone-international-surface-dark;
        color: $presszone-international-text-dark;
    }
}

// WRONG - Separate selector blocks
.dark-mode .presszone-international-widget {
    background: #282a2c;  // Hardcoded color
}
```

### Settings via Override Classes (NOT CSS Variables)
```scss
// CORRECT - Class-based overrides for design settings
.presszone-international-padding--minimal {
    .presszone-international-item {
        padding: $presszone-international-spacing-sm $presszone-international-spacing-md;
    }
}

.presszone-international-padding--wide {
    .presszone-international-item {
        padding: $presszone-international-spacing-lg $presszone-international-spacing-xl;
    }
}

.presszone-international-styling--square {
    .presszone-international-item { border-radius: 0; }
}

.presszone-international-styling--pill {
    .presszone-international-item { border-radius: $presszone-international-radius-xl; }
}
```

### BEM Naming Convention
```scss
// Block
.presszone-international-language-switcher { }

// Element
.presszone-international-language-switcher__item { }
.presszone-international-language-switcher__flag { }

// Modifier
.presszone-international-language-switcher--dropdown { }
.presszone-international-language-switcher__item--active { }
```

### Accessibility: Reduced Motion
```scss
@media (prefers-reduced-motion: no-preference) {
    .presszone-international-progress {
        transition: width 0.3s ease-in-out;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
```

### Color Contrast (WCAG 2.1 AA)
```scss
// Minimum 4.5:1 for normal text, 3:1 for large text
$presszone-international-text-primary: #0f172a;     // 15.8:1 on white
$presszone-international-text-secondary: #334155;   // 7.25:1 on white
$presszone-international-link-color: #1f71dd;       // 4.52:1 on white
$presszone-international-error-color: #dc2626;      // 5.74:1 on white
```

## Anti-Patterns (Forbidden)

| Mistake | Fix |
|---------|-----|
| Using `/scss/` folders | Always use `/css/` folders for SCSS source |
| `var(--pz-*)` for logic | Use SCSS variables with classes |
| Hardcoded colors | Always use SCSS variables |
| Separate dark mode file | Use nested `.dark-mode &` selector |
| CSS custom properties for theming | Use class-based theming with SCSS |
| `outline: none` | Use visible `:focus-visible` outline |
| Magic numbers | Use SCSS spacing/sizing variables |
| `<table>` for layout | Use CSS Grid or Flexbox |
| `float` or `clearfix` | Use Flexbox or Grid |
| `!important` (except WP overrides) | Increase specificity properly |
| Deep CSS nesting | Flatten with BEM naming |
| Short prefixes (<4 chars) | Use `presszone-international-` prefix |

## WordPress.org Compliance

### Directory Structure
```
assets/css/
├── abstracts/
│   ├── _variables.scss    # All SCSS variables
│   └── _mixins.scss       # Reusable mixins
├── base/
│   └── _reset.scss        # Base styles
├── components/
│   └── _buttons.scss      # UI components
├── frontend.scss          # Main entry point
└── frontend.css           # Compiled output (gitignored or not)
```

### Required Variable Prefixes
- SCSS variables: `$presszone-international-*`
- CSS classes: `.presszone-international-*`
- Keyframes: `@keyframes presszone-international-*`

## Integration with Other Skills
- **Often combined with**: `frontend-javascript`, `accessibility-wcag`
- **For PHP templates**: Load `wordpress-php-integration`
- **For admin UI**: Load `admin-panel-fullstack`

## Quick Reference

### Spacing Variables
```scss
$presszone-international-spacing-xs: 0.25rem;
$presszone-international-spacing-sm: 0.5rem;
$presszone-international-spacing-md: 1rem;
$presszone-international-spacing-lg: 1.5rem;
$presszone-international-spacing-xl: 2rem;
```

### Breakpoints
```scss
$presszone-international-breakpoint-sm: 640px;
$presszone-international-breakpoint-md: 768px;
$presszone-international-breakpoint-lg: 1024px;
```

### Z-Index Layers
```scss
$presszone-international-z-modal: 1000;
$presszone-international-z-popover: 1100;
$presszone-international-z-tooltip: 1200;
```

### Focus Indicators
```scss
.presszone-international-btn:focus-visible {
    outline: 2px solid $presszone-international-focus-color;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba($presszone-international-focus-color, 0.1);
}
```

## Validation Checklist
- [ ] All classes use `presszone-international-` prefix (4+ chars)
- [ ] All SCSS variables use `$presszone-international-` prefix
- [ ] No hardcoded colors (use variables)
- [ ] Dark mode uses nested `.dark-mode &` pattern
- [ ] Settings use class-based overrides (not CSS vars)
- [ ] Color contrast meets WCAG 2.1 AA (4.5:1)
- [ ] Focus indicators visible (2px minimum)
- [ ] Reduced motion support with `prefers-reduced-motion`
- [ ] BEM naming convention followed
- [ ] No `/scss/` folders (use `/css/`)