What you've done here is trade in tight coupling to Bootstrap's classnames in the markup and CSS selectors, for tight coupling between HTML markup and CSS selectors. I would argue the latter (tight coupling between HTML markup and CSS selectors) is actually more harmful in terms of maintenance.
What if the HTML structure needs to change? In your examples, you've got your CSS selectors deeply nested and tightly coupled to specific HTML elements. This will prove extremely brittle.
Far better to use a CSS naming convention that keeps your selectors short (rarely more than one needed), semantic, and decoupled from your markup.
What you've done here is trade in tight coupling to Bootstrap's classnames in the markup and CSS selectors, for tight coupling between HTML markup and CSS selectors. I would argue the latter (tight coupling between HTML markup and CSS selectors) is actually more harmful in terms of maintenance.
What if the HTML structure needs to change? In your examples, you've got your CSS selectors deeply nested and tightly coupled to specific HTML elements. This will prove extremely brittle.
Far better to use a CSS naming convention that keeps your selectors short (rarely more than one needed), semantic, and decoupled from your markup.
Rather than rewrite what many others have written about already, I will share a few resources that make the point well:
- https://smacss.com/
- http://nicolasgallagher.com/about-html-semantics-front-end-architecture/
- http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/