Bootstrap's absurdly-explicit table selectors are pissing me off again.

Bootstrap is the problem

@sgbaker, perhaps. Do you have a livable alternative? A lot of our custom widgets and layouts depend deeply on Bootstrap CSS.

@zourtney that's unfortunate.

The most viable solution is semantic minimal class HTML. We use mixins in scss to help determine layout, and apply as needed. then anything else we have written already for each project.

The problem with bootstrap and other grid frameworks is that they treat HTML as if it's handling the layout instead of allowing CSS to do all that. for example adding .row to a div doesn't really provide any context to the type of content in the div.

my HTML would be
<article>
<p>semantically semantic</p>
</article>

and SCSS
article {
width: 50%;
> p {
color: blue;
}
}

put a class on it ;)

@sgbaker, it's becoming easier to do this as I move to more of a "component-tree" architecture. But, baby steps.

@mowgli, I try, every time. 😛 Unfortunately a className on a <td> doesn't have enough specificity to override the Bootstrap stylesheet. You have to either add a child element and style that (not always what you want), ooooor bang out some obnoxiously specific, direct-descendant selectors (as seen above.)