Question 1

How do I create a modifier for a component in BigCommerce Sass style guide?

Accepted Answer

Use the syntax `componentName--modifierName` with two hyphens, like `.button--primary`. Define the modifier in Sass and apply both base and modifier classes in HTML, ensuring low specificity and clear relationships.

Question 2

What's the difference between SUIT CSS and BEM in practice?

Accepted Answer

SUIT CSS uses camelCase component names and two hyphens for modifiers (e.g., `.componentName--modifier`), while BEM often uses underscores or single hyphens. Both promote low specificity, but SUIT aligns with BigCommerce's emphasis on structured class names and meaningful hyphens for scalability.

Question 3

How should I organize Sass files for a BigCommerce micro-app?

Accepted Answer

Follow the folder structure: settings for variables, tools for mixins, vendor for third-party code, layouts for app wrappers, components for reusable UI, utilities for helper classes, and shame for temporary fixes. This ensures separation of concerns and maintainability.

Question 4

Can I use Bootstrap with BigCommerce Sass style guide?

Accepted Answer

Yes, but you must adapt Bootstrap's components to follow the naming conventions and folder structure. Place Bootstrap in the vendor folder and rework its styles into components, using global variables from BigCommerce's library for consistency.

Question 5

How to handle responsive design in this style guide?

Accepted Answer

The guide doesn't specify responsive patterns, but you can use media queries at the component level. Avoid nesting them deeply; instead, define breakpoints in settings and apply changes directly to components to keep specificity low.

Question 6

What are the best practices for variables in BigCommerce themes?

Accepted Answer

Use abstract variable names based on properties (e.g., `$color-brandPrimary`), not values. For components, namespace variables with the component name and always base them on global settings from BigCommerce's library, using maps for grouped properties like colors.

Question 7

How to integrate JavaScript with CSS classes using this methodology?

Accepted Answer

Use `js-` prefixed classes for JavaScript hooks (e.g., `js-login`), which should never be styled. This separates behavior from presentation, reducing the risk of CSS changes breaking JavaScript functionality.

BigCommerce Sass Coding Guidelines

What is BigCommerce Sass Coding Guidelines?

Overview

Use Cases

Best For

Related Projects

Found a gem we're missing?

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions