CSS Override Techniques

🚧
Coming Soon! We're putting the finishing touches on this feature

Since Knack's default CSS loads before your custom CSS, you need to ensure your styles have sufficient specificity to override the defaults. This section covers the essential techniques for making your own CSS work.

Understanding CSS Load Order

Knack Default CSS loads first
Your Custom CSS loads second (needs higher specificity to override)

Specificity Strategies

❌ Too Low Specificity - May Not Override

.kn-view {
  background-color: #f0f0f0;
}

.kn-action-button {
  background-color: #007bff;
}

✅ Higher Specificity - Will Override

/* Use parent context */
.kn-page .kn-view {
  background-color: #f0f0f0;
}

/* Use scene/view classes */
.scene_123_view_456.kn-view {
  background-color: #f0f0f0;
}

/* Combine multiple classes */
.kn-page .kn-form-view .kn-action-button {
  background-color: #007bff;
}

Recommended Specificity Patterns

Global Overrides

Use the app container for site-wide changes:

.kn-app .kn-main-nav-item {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
}

.kn-app .kn-action-button {
  border-radius: 8px;
  font-weight: 600;
}

Page-Specific Overrides

Target specific pages using scene classes:

.scene_123.kn-page .kn-view {
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.scene_456.kn-page .kn-page-title {
  color: #6f42c1;
  text-align: center;
}

View-Specific Overrides

Target individual views for precise control:

.scene_123_view_456.kn-form-view {
  max-width: 600px;
  margin: 0 auto;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.scene_789_view_101.kn-list-view {
  background-color: #fff3cd;
  border: 2px solid #ffeaa7;
}

Element State Overrides

Ensure interactive states work properly:

.kn-page .kn-action-button:hover {
  background-color: #0056b3;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.kn-page .kn-main-nav .kn-main-nav-item:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

When to Use !important

Use !important sparingly and document why:

/* Only when specificity isn't enough and inline styles need to be overridden */
.kn-page .kn-form-view {
  background-color: #ffffff !important; /* Overrides inline styles from Knack */
}

/* Better approach: increase specificity instead */
.kn-app .kn-page .kn-form-view {
  background-color: #ffffff; /* Preferred approach - higher specificity */
}