A couple of weeks
ago, I had some internet connection issues with my ISP providers equipment. To
resolve the issues -I had to make an appointment - and that meant being at home
to wait for them to show up to fix the equipment -without a working internet connection.
I tried the YouTube App on my phone for the
first time. I saw a
2013 CSSConfUS talk by Pamela Fox titled
"When Bootstrap Attacks" , where she talked about the work she did on the Coursera web site(apparently she is now at Kahn Academy).
It was a half hour presentation on
upgrading the Coursera site from mixed
versions of Bootstrap to a single version across a mixed code base - old and
new. The work to upgrade to one version was made difficult because of the
the older code was PHP which would have that all mixed with SQL Statements also
in the mix - so identifying just the bootstrap classes within the entire code
base was not easy. The Coursera sites new Architecture uses
Jade (requires NodeJS) for templating and
Stylus for CSS (a CSS
Preprocessor Library similar to Less and
Finding things by
name in the source code base was problematic, and would have been easier if
there were a namespaces in the CSS.
She said that
Bootstrap has an open issue in their backlog to Prefix their classes - but that
they have not made it a priority. She suggests having your own classes that
Extend the BootStrap classes using SASS (even though she really is using
She also recommended
that you publish your own style guide documents for your team to use and not
use the Bootstrap docs. She suggested moving away from using the Bootstrap
dependency to the CSS Class names. With HTML5 you could use Data Attributes to
hook into things instead of using the CSS Classes. Keeping Styling and
functionality concerns separate - reinforced the Separation of Concerns for
these promotes better maintainability.
Pamela Fox also
mentioned that she also started to introduce testing to their site -" if
the front end does anything at all - you need to test it" - Mocha , Chai, JsDom and Selenium were used
to start getting testing done on her site. (Needle uses Selenium + Nose
using python - to do screen shot comparisons from a good state screen shot when
pixel layout can impact functionality if
not all of a set of data is visible due to CSS Changes-she has not actually
used it) It is best to start this test development early so that you have
plenty of tests. They have only reached a 2% coverage so far (as of 2013 talk).
You need to test
that your separation of these concerns effort has not broken something and by lessening
the dependencies you have a much better overall maintainability with test coverage automation will
ease future maintenance - so if you plan on using Bootstrap or any other CSS Framework - keep the idea of separation of concerns in mind so that you do not trap yourself into a maintenance issue corner. That talk was a good followup on my look at Durandals use of Bootstrap.