0

I'm building a plugin, which is used by many online stores. When the user uses my plugin, he can generate a template (sample like this) in his store. Each store will use its own theme.

Now the question comes. Some themes are using a .page-width class to determine the container width. Some are using .wrapper class and .page-width is not available in the css file. I believe that .page-width is widely used than .wrapper in general.

How can I set the class for my container? If I just use <div class='page-width wrapper'> and the theme has 2 classes, will the wrapper class break the layout? Or I should use my own definition of .page-width class to override the original?

Since there are more than a hundred themes. I don't know how to best fit different themes.

Benny Chan
  • 730
  • 1
  • 8
  • 24
  • Take a look at this: https://stackoverflow.com/questions/983586/how-can-you-determine-if-a-css-class-exists-with-javascript – Slava Knyazev May 05 '21 at 06:10
  • If the site has definition of both of the classes and they are different so yes, you might not get the right width. – Mosh Feu May 05 '21 at 06:10
  • A common approach is to prefix all classes with a theme specific string. All Css frameworks do so, to avoid namespace collision. See this stackoverflow thread for some ideas: https://softwareengineering.stackexchange.com/questions/351551/how-to-namespace-your-css – Hans Spieß May 05 '21 at 06:12
  • @HansSpieß I don't think I can prefix classes with the theme name. There are just too many themes... Instead of avoiding namespace collision, I would like to adapt my template to the original theme design. If I can somehow reuse existing classes, my template style can fit in the original theme design. – Benny Chan May 05 '21 at 06:21

1 Answers1

0

One possibility that you can use is setting the style also for the "collision" elements

.page-width, .page-width.wrapper {
    width: 500px;
}

For elements with class page-width, it will get applied (of course).

For elements with both classes, the selector has higher priority (2 classes) than a selector with only .wrapper, and will be also applied.

vals
  • 61,425
  • 11
  • 89
  • 138