Abstracting a CSS framework in an enterprise web application

Question

Our team is attempting to "modernize" an old ASP.NET Web Forms application. One aspect we want to improve is its visual style as it looks very dated by today's standards. Additionally, its existing CSS stylesheet is an abomination and it would be easier to throw it out and start from scratch. Sadly, none of us are CSS experts so we are considering going with a CSS framework such as Bootstrap for simplicity.

My concern is directly using the Bootstrap CSS classes within the application's pages. Keep in mind this is an enterprise-level application and has many, many pages so Bootstrap class usage would be prolific. Is this a bad idea? Should we, instead, create an abstraction over top of Bootstrap? Is this even possible with CSS and/or worth the effort? My feeling is that, sure, even if we did create an abstraction to Bootstrap we probably could not simply swap it out with some other framework later. So what would be the point?

Answer 1

While CSS lets you decouple your HTML structure and its appearance to some degree, you will never be able completely decouple them. A dependency on something like Bootstrap is not something you can reasonably abstract over. Still, a framework such as Bootstrap will help you get a reasonable design without having to actually write any CSS, so using it may be totally worth it – dependency or not.

Instead of starting completely from scratch, I would recommend that you identify self-contained components in your pages and change the corresponding HTML templates to use the Bootstrap styles. That is, perform the redesign inside-out. The reason is that the existing styles might not work on their own but might depend on their enclosing layout.

The reason why CSS makes abstraction over a framework difficult is that while styles cascade, they cannot directly extend or inherit from another. If I have a style .foo { /* ... foo styles */ } and want to inherit it by a style .bar, I'd have to write:

.foo, .bar {
  /* ... foo styles */
}
.bar {
  /* ... bar-specific styles */
}

That is, we must modify the .foo-definition to add the .bar selector. That's not a good idea if .foo is defined in a framework file.

You can avoid this if you use a CSS preprocessor such as Less or Sass. Bootstrap is available in these languages which helps you adapt them more easily. In addition to inheritance/mixins, these languages offer convenience features such as variables and nested selectors – so strongly consider using one of them for your redesign. Alone the use of variables can make CSS projects much more maintainable. Of course this only applies if you will be writing your own CSS – which is not required with Bootstrap.