This process used a cascade approach – within the scss structure/files; bootstrap is imported first, then other default reset styles (including typography), then, layout, use of specific components and branded themes (if necessary). Therefore the format of the CSS, roughly follows directly target of elements (e.g. button element), classNames (e.g. button element with button className) and className overrides (e.g. button element with button button–start classNames).
To view which attributes are inherited, a html page was created with 2 iframes, showing an identical page alongside one other. The first page loaded the current Frontend CSS, the second page loaded a local version of the proposed CSS. Both pages within the iframes held HTML of all known elements / components used in apps / sites.
This created a side-by-side comparison, which allowed developer tools (inspect element) to be utilised to review which computed CSS attributes to keep and which (if any) duplicates to be removed.
Imported Bootstrap scss files included:
We started removal of bootstrap with the smallest file / amount of change, type (typography / fonts).
Margins on hgroup elements – set in Bootstrap’s reset import files and some font-sizes, were copied / moved into the existing typography scss file.
The only element to be copied across from the type import is the hr element
Unused elements and classes, such as: small, mark and classNames for lists and blockquotes, were removed as these are not used in apps.
Three scss files: display, flex and grid, were imported twice, via the import of Bootstrap utilities and Bootstrap grid. At this point removal focused on the additional selectors imported with Bootstrap utilities that were not duplicated with the import display, flex and grid via the import of Bootstrap grid.
The className .sr-only, which is heavily utilised for accessibility purposes, was copied into the existing reset scss file.
ClassNames to target: text alignments, buttons, borders and round, were removed as these are not used in apps.
Heavily utilised classNames such as: .container and .ml-md-auto, and classNames (starting with .col) utilised within the summary component, were directly copied into a new scss file. Noting that adding “!important” is necessary on the className .ml-md-auto.
Display attributes with the className .d-none and .d-md-block, were copied directly to the a-z component scss, as this is the only place those classNames were utilised.
Within this removal process it was decided that there should be some minor adaptions:
ClassNames to target: margins and flex attributes, were removed as these are not used in apps.
With the total removal of Bootstrap; a reset boiler plate scss file, missing variables for fonts, and, media queries were readded to the existing files / structure.
Each element was analysed, noted and corresponding attributes were copied (if necessary) into the now top level existing reset file.
As Eric Meyer’s reset (CSS Tools: Reset CSS (meyerweb.com)) was utilised; any unsupported elements (non HTML5) were removed.
“Label” elements will almost always have the className “form__label”. The attribute margin-bottom: 0.5rem is repeated on the className “form__label”, after the same value inherited from the selector “Label” element, this is because the className “form__label” can be applied to other element tags such as a paragraph tag “p”. Which gives the same aesthetic but may be semantically required.
Removing Bootstrap reset scss files (over several iterations) cut the CSS character count by almost 40% (39.845%)