How to do a 'soft' release of features/refactoring in CSS?
<p>this question involves workflow and .css structures. </p>

<p><strong>tl;dr</strong></p>

<p>I am looking for a best practice to refactor and reestructure my css so that different teams can use the same file, but without affecting how the site looks like for other teams.</p>

<p><strong>in depth explanation</strong></p>

<p>I work in a big company with a big "eCommerce" department (1k+ employees). I am the first Webdesigner to work here and I've inherited 5+ years of Java Developer's CSS. We have 3 big teams that use the same CSS for their areas of the website.</p>

<p>I was hired to bring the same look and feel to all the areas of our eComm solution. This means I have to refactor a lot (I would guess around 90%) of the code. I will give an example using tables:</p>

<pre><code>&lt;table class="company-table team-table static-table"&gt;&lt;/table&gt;
</code></pre>

<p>This makes my job of refactoring the CSS really hard. I would like to just summarize the table in <strong>one</strong> "static" table to be used for all teams. I could take a look at all the tables and refactor them in the class </p>

<p><code>static-table</code></p>

<p>The problem with this approach is that this class is used in combination with other classes by every team, which make changes to the table and might even override the refactored class.</p>

<p>Each team have different sprints and releases, that are not in sync. I could ask the teams to sync their work with mine. But that's not gonna happen.</p>

<p>My idea is to make a completely new class, eg:</p>

<p><code>company-static-table</code></p>

<p>In this new class I would put all the attributes for the table:</p>

<pre><code>.company-static-table {border-radius: 0.5em; padding: 1em; ... }
</code></pre>

<p>I could then tell the teams that there is a new static table class and that they have (for example) 5 sprints to implement the new class. This way I would allow them to add the changes when it best suits them. </p>

<p>This would work nice, if the tables would stay the same forever and everywhere they should look the same. But it might be that (eg) we need a different padding in an area of the site (different team). My solution would be:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>  .company-static-table { ... 
      .team-a-table { 
        padding: 0.5em;
      } 
  }</code></pre>
</div>
</div>
</p>

<p>...well, but this would start with the problem again. It would be a little bit better since now there are objects with 4 or even more css classes that could be refactored in one. This way I would reduce the number of classes to a maximum of 2.</p>

<p>It should be clear that I cannot change their workflow. I don't want to start delivering a CSS for each team.</p>

<p>This is a huge challenge for me and I only have 2+ years of experience with no colleagues or boss that are webdesigners. I already broke a lot of elements trying to refactor the code.</p>

<p>Please any help at all would be awesome. I have almost 20k lines (when compiled) css to refactor. I don't want to start a certain method only to see that it was a bad idea...</p>

<p>Thanks for any input</p>