0

I am developing a CMS and one of the design challanges is to isolate CSS to certain parts of the website-builder page

|||||||||||||||||||||||
|      CMS HEADER     | 
|||||||||||||||||||||||
| C |                 |
| M |                 |
| S |   BUILDER       |
|   |   CANVAS        |
|   |                 |
|||||||||||||||||||||||

I need to isolate the CMS CSS of the header and the sidebars from the builder-canvas. I also need to CSS of the website you are building on the canvas to just be applied to the canvas.

I have tried..

  • using CSS scoping and a jQuery plugin to do this, but because of the high amounts of CSS, this slows the already javascript-heavy builder to far down.
  • iFrame is no option, because I need to use alot of JavaScript to get data from both parts at the same time.

The only other thing I can come up with is adding ID's to certain parts and prepending these ID's to every selector in the corresponding CSS files. I would use SASS to accomplish this.

This will take up huge amounts of time, mainly because I am also using plugin CSS files and Bootstrap in the CMS and I need to isolate EVERYTHING.

QUESTIONS

  1. Does adding these CSS ID's to every selector decrease performance much?
  2. Are there any other options to do this?
PIDZB
  • 903
  • 1
  • 15
  • 38

1 Answers1

0
  1. Not noticably, just avoid nesting too many levels deep.
  2. I know you mention iframes are not an option, but many existing sites (shopify, wordpress) seem to use iframes to achieve this - to me this seems like the cleanest way, as one doesn't necessarily need to know about the other. If your page is hosted on the same domain, you can pass data, and access methods as normal from your iframe with window.parent.

Someone here suggests using the postmethod API which would give you more scope to pass data, and send instructions back and forth.

Community
  • 1
  • 1
phynam
  • 467
  • 2
  • 12