コーディングに慣れてきたので、もっと効率的に早くhtmlが組めるようになりたいという方は、「OOCSS」で組んでみましょう。

「OOCSS」とは、米ヤフーのNicole Sullivan氏が提唱したcssの記述方法です。
構造（パーツ）とスキン（見た目）を分離してクラス定義し、それらを組み合わせてスタイルを定義していきます。

構造とスキンの分離の例として一番分かりやすいのは、CSSフレームワークである「Bootstrap」ではないでしょうか。

例えばボタンですが、buttonタグのクラス名に「btn」という構造と、「btn-primary」というスキンとの組み合わせにより、青色のボタンを作ることができます。同じ構造で、緑色に変えたい場合は、「btn-primary」を「btn-success」に変更するだけです。

OOCSSの最大のメリットは、「基本的なクラスやよく使うクラスは、別サイトでもそのまま使いまわせる」ことです。
先ほどのBootstrapのボタンのように、ページに依存しないcssやクラス名にしておくことで、どのサイトでも同じように使用できるのです。

注意としては、
【「見た目」のままクラス名をつけないこと。】です！

赤いボタンに対してclass=“red_button”とクラス名をつけたとします。
しかし後で色が青に変更になった場合、「青色のボタンなのに、class名が”red”」となり、後で管理が面倒なことになってしまいます。
この場合は、見た目に変更が入っても大丈夫な名前にしましょう。（link_buttonなど）

Bootstrapを参考に、効率の良いcssの記述を見直してみませんか？