Hacker News Reader

Comment by paperpunk | Hacker News Reader

Forgive me for what may be a cliché but aren't we just going back to 10 years ago when we moved from layout in HTML tables to CSS? Only now it's `<div class="row"><div class="col-xs-12">` instead of `<tr><td>`.

I worry that the reason people started to swing back towards that style isn't really being addressed by things like CSS Grid. That being that it's very hard to maintain CSS because it's very hard to reason about what rules are being applied where unless you follow some strict personal naming conventions.

What are we doing to address this?

View on HN

Totally agreed that Bootstrap styling-in-HTML sucks, but it was only ever pushed by Bootstrap, BEM and other things that are slowly going away.

I build using CSS grid. Since there's no requirement for stylistic class names, I don't use them: instead I use the class names for what that item is.

Eg, to make a login box I use:

    <div class="login">

    .login {
        @include center-in-parent;
        background: $dark-background;
    }

Rather than:

    <div class="bootstrap-centered-dark-background-silly-styling-in-html">

As a result, when I change what login box looks like I change only my SCSS, rather than both the HTML and the SCSS.

Discussions a plenty here: https://news.ycombinator.com/item?id=13528599

The situation you describe is more of a middle-point -- moving layout from being based on tables to being based on styles was and still is a good idea, but there are still cases in which CSS has failed to fully separate layout from the HTML.

The article discusses how bootstrap uses patterns like `<div class="row"><div class="col-xs-12">` -- specifically why they fail and how using the CSS Grid specification manages to better achieve this full separation.

Reply on news.ycombinator.com