👩‍💻Best practices for styling your store

When integrating third-party widgets (like ours), it’s important to avoid style conflicts that can affect their functionality or appearance. Here are some best practices to structure your store's styles safely:

Avoid overly aggressive global resets

Global resets can unintentionally affect widgets, iframes, or external integrations.

❌ NOT recommended:

 * {
   all: unset;
  }

  body, html {
    margin: 0;
    padding: 0;
    font-family: Arial !important;
  }  

✅ Recommended

.store * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  } 

Don’t force global fonts

Changing the global font affects the entire DOM, including embedded widgets or libraries.

❌ NOT recommended:

body {
    font-family: Arial !important;
  }  

✅ Recommended

.store {
    font-family: Arial;
  }

Control style specificity

Avoid overriding generic classes like .modal, .popup, or .overlay without proper context.

❌ NOT recommended:

.modal {
    position: fixed;
    z-index: 9999;
    background: #fff;
  }

✅ Recommended

.store .modal {
    position: fixed;
    z-index: 1000;
    background: #fff;
  }

Handle z-index properly

Improper use of z-index can cause unexpected overlaps with widgets or other components.

❌ NOT recommended:

 * {
    position: relative;
    z-index: 99999;
  }

✅ Recommended

 .header {
    z-index: 1000; /* Avoid extreme values unless strictly necessary. */
  }

Avoid global styles on base elements

Overriding basic HTML tags can affect widgets or third-party components.

❌ NOT recommended:

button {
    border: none !important;
    background: transparent !important;
  }

✅ Recommended

.store-button {
    border: none;
    background: transparent;
  }

Use CSS variables for themes and colors

❌ NOT recommended:

.store h1 {
    color: #ff6600;
    font-family: Arial, sans-serif;
  }

✅ Recommended

.store {
    --primary-color: #ff6600;
    --font-main: 'Arial', sans-serif;
  }

  .store .custom-title {
    color: var(--primary-color);
    font-family: var(--font-main);
  }

Use prefixed class names to avoid conflicts

Using common class names like .button, .icon, or .container without a namespace increases the risk of CSS collisions.

❌ NOT recommended:

.button {
    padding: 10px;
  }

✅ Recommended

 .store-button {
    padding: 10px;
  }

Maintaining clean and well-scoped CSS is essential when working with third-party widgets or embedded components. Following these best practices helps ensure:

• Your store’s styles remain consistent and predictable.

• Third-party integrations work as expected, without visual or functional conflicts.

• Maintenance becomes easier, reducing technical debt and avoiding hard-to-debug issues in the future.