SCSS Best Practices - Professioneller Workflow

Best Practices für Production-Ready SCSS.

File Organization

7-1 Pattern

scss/
├── abstracts/
│   ├── _variables.scss
│   ├── _mixins.scss
│   └── _functions.scss
├── base/
│   ├── _reset.scss
│   └── _typography.scss
├── components/
│   ├── _buttons.scss
│   └── _cards.scss
├── layout/
│   ├── _header.scss
│   └── _grid.scss
├── pages/
│   └── _home.scss
├── themes/
│   └── _dark.scss
├── vendors/
│   └── _bootstrap.scss
└── main.scss

Naming Conventions

BEM Pattern

// Block
.card {
  // Element
  &__header {}
  &__body {}
  &__footer {}

  // Modifier
  &--highlighted {}
  &--large {}
}

Variables

// ✅ Gut
$color-primary: #007bff;
$font-size-base: 16px;
$spacing-md: 16px;

// ❌ Schlecht
$blue: #007bff;
$size: 16px;

Performance

Nesting Limit

// ❌ Zu tief
.a .b .c .d .e .f { }

// ✅ Max 3-4 Levels
.component {
  .element {
    .subelement { }
  }
}

@extend vs @mixin

// @extend für statische Styles
%button-base {
  padding: 10px 20px;
}

// @mixin für dynamische Styles
@mixin button($color) {
  background: $color;
}

Maintainability

Variables für alles

// ❌ Magic Numbers
.button {
  padding: 12px 24px;
  font-size: 16px;
}

// ✅ Variables
.button {
  padding: $spacing-md $spacing-lg;
  font-size: $font-size-base;
}

Mixins Library

// _mixins.scss
@mixin flex-center { }
@mixin button-variant($color) { }
@mixin responsive($breakpoint) { }

// abstracts/_variables.scss
$color-primary: #007bff;
$spacing-md: 16px;
$breakpoint-md: 768px;

// abstracts/_mixins.scss
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin responsive($breakpoint) {
  @media (min-width: $breakpoint) {
    @content;
  }
}

// components/_button.scss
@use "../abstracts" as *;

.btn {
  padding: $spacing-md;

  &--primary {
    background: $color-primary;
  }

  &__icon {
    @include flex-center;
  }

  @include responsive($breakpoint-md) {
    padding: $spacing-md * 1.5;
  }
}

Do's and Don'ts

✅ Do's

• @use statt @import
• BEM naming pattern
• Variables für Werte
• Max 3-4 Nesting
• Mixins Library
• Responsive Mixins
• Comments für Complex Logic

❌ Don'ts

• Keine Magic Numbers
• Nicht zu tief nesten
• @import vermeiden
• Keine !important (außer nötig)
• Keine ID Selectors
• Kein redundanter Code

Viel Erfolg! 🚀