CSS設計初心者によるHTMLコードの肥大化

Question

前提

FLOCSSを採用しました。css設計は初心者です。

実現したいこと

css設計を用いて、機能的なcssを作りたいが、HTMLのソースコードはすっきりさせたい

発生している問題

cssを部品化して組み合わせることで、再利用性は上がりましたが、
一つのHTMLタグに指定するCSSのclass名が増え、
HTMLが長くなり見づらくなってしまいました。
CSSはsassで分割したものを@importで必要なだけ読み込んでるので肥大してないと思います。

質問

HTMLが長くなるのはマルチクラスの宿命なのでしょうか？

該当のソースコード

画像と説明が一組となったブロックのリストです。
（クリックできるようにaタグで囲んでます）
各項目の幅基準に画像の高さを決めたいです。

↓ソースA

<ul class="p-items">
    <li class="p-items__item">
        <a class="p-items__item__link" href="">
            <figure>
                <div class="p-item-img-wrap u-relative">
                    <img class="p-item-img-wrap__img c-absolute00 p-size100per u-objectfit-contain" src="hoge.svg" alt="">
                </div>
                <figcaption class="p-item-img-txt">あいうえお</figcaption>
            </figure>
        </a>
    </li><!--/.p-items__item-->
    <li class="p-items__item">
        <!--省略-->
    </li><!--/.p-items__item-->
    <li class="p-items__item">
        <!--省略-->
    </li><!--/.p-items__item-->
</ul>

ソースAでは、

.c-absolute00{
position:absolute;
top:0;
left:0;
}
.p-size100per{
width:100%;
height:100%;
}
.u-objectfit-contain/*IE用のjs作動させるため別途用意*/{
object-fit:contain;
}

という風に、このリスト以外でもよく使っていた便利部品のcssを再利用しました。
しかしhtmlが長くなってしまいました。

試したこと

シングルクラスを検討・・・
htmlは短くなるが、classの再利用ができなくなる分、cssが肥大？

「FLOCSS html肥大」や「マルチクラス　html肥大」で検索・・・
cssの肥大を抑えるものばかり。htmlについては見つけられなかった。

Answer 1

現行法ならフォーマット次第で対応できるのかなぁと思います。

<img class="
    p-item-img-wrap__img 
    c-absolute00 
    p-size100per 
    u-objectfit-contain" 
    src="hoge.svg" alt=""
/>

そもそもの肥大化という課題を解決されたいようでしたら、vuetifyなどのコンポーネント指向による技術を選定された方がいいのではと思いました。

Comments

[退会済みユーザー]

ご回答ありがとうございます。vuetifyというものについて調べてみようと思います。