Style Formats

ScrapeStudio supports multiple styling approaches for your extracted components, allowing you to choose the format that best fits your project's needs.

Available Style Formats

Choosing a Style Format

When deciding which style format to use, consider the following factors:

• Project Requirements: Match your existing project's styling approach
• Team Preferences: Use what your team is most comfortable with
• Component Complexity: More complex components may benefit from CSS Modules or Styled Components
• Maintainability: Consider how easy it will be to maintain and update styles

Style Format Settings

You can configure your preferred style format in the Settings panel:

Advanced Style Features

CSS Variables

ScrapeStudio preserves CSS variables (custom properties) in the extracted styles:

/* Original */
:root {
  --primary-color: #3b82f6;
}
 
.button {
  background-color: var(--primary-color);
}
 
/* Extracted */
.button {
  background-color: var(--primary-color, #3b82f6);
}

Media Queries

When extracting responsive components, ScrapeStudio preserves media queries:

.container {
  width: 100%;
}
 
@media (min-width: 768px) {
  .container {
    width: 50%;
  }
}

Pseudo-Classes and Pseudo-Elements

ScrapeStudio preserves pseudo-classes and pseudo-elements in the extracted styles:

.button:hover {
  background-color: #2563eb;
}
 
.button::before {
  content: '';
  display: block;
}