nimeamiskaytannot.md

ID	post_title	author	post_excerpt	layout	permalink	published	post_date
443	Nimeämiskäytännöt	Roni		page	http://handbook.dude.fi/nimeamiskaytannot	true	2019-08-12 08:33:33 -0700

Dude käyttää tyylipuolella (SCSS) SMACSS (Scalable and Modular Architecture for CSS) ja WordPressin Gutenbergiin pohjautuvaa nimeämiskäytäntöä. Moduuleja, eli ulkoasussa olevia rajattuja 100% leveitä alueita (<section>) kutsutaan nimellä block. Näiden sisällä ensimmäistä diviä kutsutaan nimellä container.

Tyypillinen HTML-rakenne

<section class="block block-example">
  <div class="container">
    <div class="cols">
      <div class="col col-text">
        <p class="block-title-pre" aria-describedby="block-title-something">Some pre-heading</p>
        <h2 class="block-title" id="block-title-something">Some heading - Lorem ipsum</h2>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel accumsan libero. Duis non erat in odio porta venenatis. Integer nibh nulla, mollis a eleifend a, laoreet ac eros. Aliquam venenatis at mauris non pellentesque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla condimentum elementum leo. Etiam viverra nec lectus eu bibendum.</p>

        <p>Aenean ac ultrices metus. Donec pretium laoreet massa accumsan sodales. Integer non facilisis ante. Duis scelerisque ex nulla. Sed sed ligula ipsum. Fusce porttitor tincidunt finibus. Duis ut convallis elit. Curabitur viverra vehicula ante, sit amet dapibus urna dignissim in. Aliquam id molestie dolor, et sollicitudin arcu.</p>
      </div>

      <div class="col col-image col-poster">
        <img src="<?php echo get_theme_file_uri('/images/placeholder.png'); ?>" alt="Dynamic title" />
      </div>
    </div>
  </div>
</section>

Tyypillinen CSS-rakenne

.block.block-example {
  // Default background-color
  background-color: $color-mudgreen;

  h1,
  h2,
  p {
    color: $color-white;
  }

  .block-title-pre {
    margin: 0 0 1rem;
  }

  .block-title {
    margin-top: 0;
  }

  .cols {
    display: flex;
    color: $color-white;
  }

  .col.col-text {
    @media (min-width: $some-breakpoint) {
      width: 50%;
      margin-right: 30%;
    }
  }

  .col.col-image {
    @media (min-width: $some-breakpoint) {
      width: calc(50% - 30%);
    }

    img {
      max-width: 395px;
      width: 100%;
      height: auto;
    }
  }
}

Taustakehitys

PHP-kehityksessä noudatetaan virallista WordPress Coding Standardsia, muutamia teemakehityksen (WPCS) poikkeuksia lukuunottamatta. Poikkeukset on määritelty pohjateeman phpcs.xml-tiedostossa ja vielä tarkennetusti projektikohtaisesti projektin oman teeman phpcs.xml:ssä.