スペルミスを防ぎたい！

この記事を書くきっかけ

研修でサイト模写をしているときにスペルミスに気付かず、タイムロスしてしまったため。

実例

模写したサイト→らくらくメルカリ便[https://www.mercari.com/jp/rakuraku-mercari/]

index.html

      <nav class="blead-crumbs">
        <ul>
          <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
            <a href="https://www.mercari.com/jp/" itemprop="url">
              <span itemprop="title">
                メルカリ
              </span>
            </a>
            <i class="fas fa-chevron-right" style="color: darkgray"></i>
          </li>

          <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
            <span itemprop="title">
              らくらくメルカリ便
            </span>
          </li>
        </ul>
      </nav>

styles.css

bread-crumbs {
  border-top: 1px solid #eeeeee;
  background: #ffffff;
}
.bread-crumbs ul {
  padding: 16px 0;
  font-size: 0;
  width: 700px;
  overflow: visible;
  margin: 0 auto;
}
nav ul {
  list-style: none;
}
.bread-crumbs li {
  display: inline-block;
  font-size: 14px;
  text-align: center;
}
.bread-crumbs ul li i {
  margin: 0 8px;
  font-size: 9px;
}
.fas fa-chevron-right {
  content: \f054;
  font-family:'Font Awesome 5 Free';
  font-weight:900;
}
.bread-crumbs li:last-child {
  font-weight: 600;
}

どこが間違っているかわかりました？

間違っているところは…

index.html

      <nav class="blead-crumbs">
        <ul>
          <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">

navのclass名が間違っています。
正しくはbread-crumbsです！
css側は正しい綴りなのにhtml側が間違っていたせいで、見た目が変わらなかったわけです。
ちなみにbleadは「刀」です。

スペルミスを防ぐには？

• 単語を覚える

これが一番の予防策が気がします。完璧にとはいかなくても「こんな綴りだったような」程度でいいと思います。英語ができれば訳ないんですけどね。

• 検索してみる

今回スペルミスに気づけたのはVisual Studio Code内で検索したからです(早めに「検索しよう」と思えば、無駄な時間を減らせた)。
それから綴りが「これで合ってたっけ？」と少しでも思ったら即ググること！
意味も一緒に覚えてしまえばいいんです。

• 日本語入力して変換する

求めている単語が出てくるとも限らないけど割と変換してくれる。

他に「こんな方法でスペルミスを防いでいるよ」という意見があれば教えてください。