title: How can I "disable" an inline style that is overwriting my CSS?
body: <p>I'm writing a Chrome Extension to modify the user interface of Squarespace, which "overlays" CSS on top of your website in order to display the browser-based website builder.</p>
  
  <p>Let's say this is my body CSS:</p>
  
  <pre><code>body {
   background-color: #000000;
   background-image: url("/storage/body.jpg");
   background-repeat: no-repeat;
   background-position: top center;
  }
  </code></pre>
  
  <p>When you open up Squarespace's user interface, it adds a few classes to the CSS with inline styling. So this is added to my code automatically:</p>
  
  <pre><code>{
  padding-top: 56px;
  background-position: 50px 56px;
  }
  </code></pre>
  
  <p>So since I'm modifying the user interface with a CSS Chrome Extension I want to essentially "skip" or "disable" those inline styles from being added. I could just use !important on my extension CSS, but some websites might use a different background-position, I don't want to just put "background-position: top center !important;" in my extension. I also don't want to just strip the classes using a script because they're also used for other styling.</p>
  
  <p>Thanks!</p>