search

csswizardry / ama

Ask me anything!
57 stars 4 forks source link

Refactoring and partial integration #45

Closed emage closed 5 years ago

emage commented 7 years ago

Hi Harry, I am working for a company who is in need of a major site upgrade. However, they only want certain section to be updated for now but slowly migrate incrementally. The old site is base of Bootstrap 2.3. The goal is to update to Boostrap 3+ and eventually Bootstrap 4. The issue is that the newer Bootstrap have very different syntax now, so I have a feeling there may be alot of broken layout or leakage.

Old site:

New site

The site uses a .master page for all its CSS and JS references

So my question is how to SAFELY update certain pages or section. It is OK to have these new pages look different from the old pages -- long as the content is there.

How should I scope these pages to use the new CSS or JS without breaking the old ?

Thanks

csswizardry commented 5 years ago

Firstly, make sure your regression testing is very well established. BackstopJS is a great tool.

Secondly, know and love all: initial;.

Next, use PostCSS to give all of your new classes a namespace.

Then, make use of a defence.css to brute-force any fixes for regressions or collisions. This file should be temporary (famous last words).

Finally, good luck!