Skip to content

Latest commit

 

History

History
56 lines (45 loc) · 3.39 KB

3.md

File metadata and controls

56 lines (45 loc) · 3.39 KB

3. Think Through Your Markup

<div class="w3-col l3 m6">
  <h3 class="w3-margin-top">Server Side</h3>
  <a class="w3-bar-item w3-button" href="/sql/default.asp">Learn SQL</a>
  <a class="w3-bar-item w3-button" href="/php/default.asp">Learn PHP</a>
  <a class="w3-bar-item w3-button" href='/asp/default.asp'>Learn ASP</a>
  <a class="w3-bar-item w3-button" href='/nodejs/default.asp'>Learn Node.js</a>
  <a class="w3-bar-item w3-button" href='/nodejs/nodejs_raspberrypi.asp'>Learn Raspberry Pi</a>

  <h3 class="w3-margin-top">Web Building</h3>
  <a class="w3-bar-item w3-button" href="/w3css/w3css_templates.asp">Web Templates</a>
  <a class="w3-bar-item w3-button" href="/browsers/default.asp">Web Statistics</a>
  <a class="w3-bar-item w3-button" href="/cert/default.asp">Web Certificates</a>
  <a class="w3-bar-item w3-button" href='/tryit/default.asp'>Web Editor</a>
  <a class="w3-bar-item w3-button" href="/whatis/default.asp">Web Development</a>
</div>

This example is different from the others, because it serves as a reminder. There are a few ways to approach web development, and the main ones are reflected by two paradigms.

The first paradigm is based on loose coupling and separation of concerns, which means to keep apart markup (HTML), styling (CSS), and behavior (JavaScript, essentially).

The second paradigm is highly coupled, where CSS is mostly delivered through deep penetration of markup using well presentational classes, and where JavaScript performs manipulation of both HTML and CSS.

D> There are many methods linked to the second paradigm—see e.g. BEM, OOCSS, also Atomic CSS—, which gives it depth, but there’s little theoretical unity in them.

Although a believer in the first paradigm (which in my eyes has never been exhausted so as to count as fully explored or understood), the idea is not to mandate a particular school of thought—but to instead suggest to review and question your code and think about it.

The sample code, then, suffers from basic issues as did previous examples—it’s astonishing how many issues one can find in even small code snippets. This includes poor semantics (<nav> and lists would be more fitting), inconsistent formatting (note the use of double and single quotes), and front-loaded navigation terms impairing scannability (a usability issue).

One can also find it problematic to repeat oneself so much (Don’t Repeat Yourself?). 15 lines of fairly basic code, 10 w3-bar-item classes, 10 w3-button classes on the same elements, yet lack of basic meaning. This may all be intended—and let’s assume so—, but the point is, we must think.

Another more minimal way to code the sample is this:

<nav>
  <h3>Server Side</h3>
  <ul>
    <li><a href=/sql/>SQL</a>
    <li><a href=/php/>PHP</a>
    <li><a href=/asp/>ASP</a>
    <li><a href=/nodejs/>Node.js</a>
    <li><a href=/raspberrypi/>Raspberry Pi</a>
  </ul>
  <h3>Web Building</h3>
  <ul>
    <li><a href=/w3css/>Templates</a>
    <li><a href=/browsers/>Statistics</a>
    <li><a href=/cert/>Certificates</a>
    <li><a href=/tryit/>Editors</a>
    <li><a href=/whatis/>Web Development</a>
  </ul>
</nav>