(Some)

CSS Best Practices considered harmful?

The Journey

Swings and Roundabouts

GET OFF

MY LAWN

Problems

with modern

CSS practices

A long, long time ago...

15 years ago

<TABLE border="1" borderColor="#666666" cellpadding="0" cellspacing="0">
    <TR>
        <TD colspan="3"><IMG src="spacer.gif" width="800" height="100"></TD>
    </TR>
    <TR>
        <TD><IMG src="spacer.gif" width="100" height="400"></TD>
        <TD>
            <TABLE>
                …
            </TABLE>
        </TD>
        <TD><IMG src="spacer.gif" width="100" height="400"></TD>
    </TR>
    <TR>
        <TD colspan="3"><IMG src="spacer.gif" width="800" height="100"></TD>
    </TR>
</TABLE>

Then in 2003…

CSS  IS AWESOME

…our HTML though…

Markup afflictions

<div id="header">
    <div id="header-logo">
        <div id="logo-acme-inc"><a href="/">Acme Inc.</a></div>
    </div>
    <!-- end #header-logo -->
</div>
<!-- end #header -->
<div id="content">
    <div id="content-header">
        <div id="content-outer">
            <div id="content-inner">
                <h1 id="content-heading">Welcome to Acme</h1>
            </div>
            <!-- end #content-inner -->
        </div>
        <!-- end #content-outer -->
    </div>
    <!-- end #content-header -->
</div>
<!-- end #content -->

DIVITIS

HTML5 - ooh la la!

<div id="header">
    …
</div>
<!-- end #header -->
<header>
    …
</header>

✗

✔︎

…then along came the CSS Methodologies…

CSS 

Methodologies? 

Guidelines?

Best practices?

Ideology?

Dogma?

Naming conventions?

BEM

OOCSS

SMACSS

Inuit

etc.

SuitCSS

Great benefits

  • Common ground for authors
  • Dodges troubling CSS concepts
  • Flexible and re-usable
  • Enforces 'best practices'
  • Enforces naming conventions
  • Improved development principles

Those sound great!

Ideologies

vs

Practice

Problem: Avoiding Specificity

BEM says:

  • use classes
  • avoid descendent selectors
  • never use ID selectors
  • never use !important

 

Specificity 101

h1 {…}
.site-title {…}
#logo {…}

Score: 0,0,1

Score: 0,1,0

Score: 1,0,0

h1#logo.site-title {…}

Score: 1,1,1

Broad targetting

Specific targetting

Are we OK with losing the Cascade?

(CSS's most powerful feature)

Problem:
Time spent in the wrong places

X

Y

Z

CSS

X

CSS

Y

CSS

Z

HTML

CSS

HTML

CSS

HTML

CSS

HTML

HTML

HTML

HTML

Problem:

Missed learning opportunity

  • Specificity?
  • the Cascade?
  • that selector?
  • !important?

Why are they bad (or great)?

What is:

To master,

you must know.

(and practice)

Problem:

Poor Accessibility

<div class="ui cancel button">Cancel</div>
<button class="ui cancel button">Cancel</button>

Problem:

Poor Semantic HTML

<div class="modal" role="dialog">
    <div class="modal__header">…</div>
    <div class="modal__contents">…</div>
    <div class="modal__footer">…</div>
</div>
<section role="dialog">
    <header>…</header>
    <article>…</article>
    <footer>…</footer>
</section>

vs

Problem:

Noisy HTML

.menu {}
    .menu__item {}
        .menu__link {}

.menu-main {}
    .menu-main__item {}
        .menu-main__link {}
<nav role="navigation">
    <ul class="menu menu-main">
        <li class="menu__item menu-main__item">
            <a href="/" class="menu__link menu-main__link">Home</a>
        </li>
    </ul>
</nav>
<nav role="navigation">
    <ul>
        <li>
            <a href="/">Home</a>
        </li>
    </ul>
</nav>
<nav role="navigation">
    <ul class="menu menu-main">
        <li class="menu__item menu-main__item">
            <a href="/" class="menu__link menu-main__link">Home</a>
        </li>
    </ul>
</nav>

vs

160 bytes

67 bytes

Let's summarise

BEM as a CSS Methodology

✗

✔︎

  • Common ground for authors
  • Dodges troubled CSS concepts
  • Flexible and re-usable
  • Enforces 'best practices'
  • Enforces naming conventions
  • Improved dev principles
  • More time in the HTML
  • No cascade power
  • Some left in the dark
  • Can lead to poor HTML
  • Going backwards

What about an alternative?

Document Structures

Document Outlines

or

<header role="banner">
    <h1>…</h1>
    …
    <nav role="navigation">
        <ul>…</ul>
    </nav>
</header>

<main role="main">
    <header>
        <h1>…</h1>
    </header>
    …
</main>

<footer role="contentinfo">
    …
</footer>

layout.html

[role="banner"] {
    h1 {…}
}
[role="navigation"] {
    ul {…}
}


[role="main"] {
    > header {…}
    h1 {…}
}



[role="contentinfo"] {
    …
}

_document_structure.scss

<section>
    <h1>…</h1>
</section>

Section title

<header role="banner">
    <h1>…</h1>
</header>

Site title

<main role="main">
    <header>
        <h1>…</h1>
    </header>
</main>

Page title

e.g. Self-classifying headings

section > h1 {…}

[role="banner"] > h1

main > header > h1

It's good to question

Got a question?

shaun@abletech.nz  or  @ndorfin

Made with Slides.com