有時我的代碼變得非常丑陋
尤其是當我使用tailwind之類的框架時，當專案變大時，我可以毫不夸張地說，我90%的時間都花在了尋找元素之間想要的類上
保持代碼干凈的解決方案之一是使用自己的標簽，我不是指新的 html5 標簽，如aside, header, footer, section, ...
例如
<div class="flex items-center justify-center p-4 rounded shadow">
<div id="inner"> <!-- A dirty tag to prevent display flex from affecting child tags -->
<div> somedata </div>
<div> somedata </div>
<div> somedata </div>
</div>
</div>
可以替換為
<card class="flex items-center justify-center p-4 rounded shadow">
<inner>
<div> somedata </div>
<div> somedata </div>
<div> somedata </div>
</inner>
</card>
即使在 vanilla css 自己的標簽中，也使代碼更加規范示例
<div class="post">
<header>
<div class="header__image">
<img src="example.jpg">
<div>
<div class="header_details">
...
</div>
</header>
<div class="post__content">
</div>
.....
</div>
它可以像
<post>
<header>
<picture>
<img src="example.jpg">
</picure>
</header>
<content>
<p> something </p>
<content>
...
</post>
除了不被舊瀏覽器支持之外，是否存在任何嚴重的技術問題？
uj5u.com熱心網友回復：
經過 21 天的編碼自己的自定義標簽后，我的答案是否定 的，我使用我自己的標簽這樣
默認標簽：
<div class="card">
<header>
<img src="img_avatar.png" alt="Avatar" style="width:100%">
</header>
<div class="container">
<div>John Doe</div>
<p>Architect & Engineer</p>
</div>
</div>
自有標簽
<card>
<header>
<image src="img_avatar.png" alt="Avatar" style="width:100%">
</header>
<container>
<name>John Doe</name>
<job>Architect & Engineer</job>
</container>
</card>
一切都很好。
筆記：
<custome-tags>默認顯示是inline<image>是同義詞<img><title>是text-only和display:none元素。你可以<subject>改用<col><colgroup>is 為元素中的每一列指定列屬性。你可以<column>改用
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/512482.html