必要なものが一目瞭然かどうかわからないので、試してみます。
続行する前に、次の点に注意してください。
- Twitter Bootstrapを使用しています
- 私もLESSを多用しています
ということで、上のナビゲーションを例にとります。私のコードは次のとおりです。
<div class="navbar navbar-inverse navbar-fixed-top" style='-moz-box-shadow: 0 3px 10px #888; -webkit-box-shadow: 0 3px 10px #888; box-shadow: 0 3px 10px #888;'>
<div class="navbar-inner">
<div class="container">
<div class="nav-collapse collapse">
<a class="brand" href="http://www.google.com"><img alt="This is an image" src="<?= base_url('library/img/logo-2.png'); ?>" width="200"/></a>
<ul class="nav pull-right">
<li class="active"><a href="http://www.google.com"><i class="icon-home icon-lightgray"></i> Home</a></li>
<li><a href="http://www.google.com"><i class="icon-th icon-lightgray"></i> Themes</a></li>
<li><a href="http://www.google.com"><i class="icon-wrench icon-lightgray"></i> Tools</a></li>
<li><a href="http://www.google.com"><i class="icon-align-right icon-lightgray"></i> Blog</a></li>
<li class="divider-vertical"></li>
<li class="dropdown">
<a href="http://www.google.com" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true"><i class="icon-user icon-lightgray"></i> Log In<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="http://www.google.com">An Item 1</a></li>
<li><a href="http://www.google.com">An Item 2</a></li>
<li><a href="http://www.google.com">An Item 1</a></li>
<li><a href="http://www.google.com">An Item 2</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
それで、私は考えています-「ここには何がありますか？」:
- 4 つのネストされた DIV
- 多くの「冗長な」クラス (私は
navbarornavbar-inverseまたはnavbar-fixed-topを他の場所で使用していません。それが私が興味を持っている唯一の組み合わせです)。
私がやろうとしていること
一言で言えば、まったく同じことが次のように書かれていることを想像できます（またはそれ以上）：
<div class="navigation">
<a class="brand" href="http://www.google.com"><img alt="This is an image" src="<?= base_url('library/img/logo-2.png'); ?>" width="200"/></a>
<ul class="nav pull-right">
<li class="active"><a href="http://www.google.com"><i class="icon-home icon-lightgray"></i> Home</a></li>
<li><a href="http://www.google.com"><i class="icon-th icon-lightgray"></i> Themes</a></li>
<li><a href="http://www.google.com"><i class="icon-wrench icon-lightgray"></i> Tools</a></li>
<li><a href="http://www.google.com"><i class="icon-align-right icon-lightgray"></i> Blog</a></li>
<li class="divider-vertical"></li>
<li class="dropdown">
<a href="http://www.google.com" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="1000" data-close-others="true"><i class="icon-user icon-lightgray"></i> Log In<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="http://www.google.com">An Item 1</a></li>
<li><a href="http://www.google.com">An Item 2</a></li>
<li><a href="http://www.google.com">An Item 1</a></li>
<li><a href="http://www.google.com">An Item 2</a></li>
</ul>
</li>
</ul>
</div>
これはあまり役に立たないかもしれませんが、(コードの観点から) 私のページがはるかに読みやすくなると信じています。
それで、あなたはそれについてどうしますか？
免責事項： この質問のやや奇妙な性質を許してください。独自のコンパイラ/インタプリタ/言語を、既存のコンパイラ/インタプリタ/言語で気に入らない部分をすべて書くのが好きな人にとっては、それはちょっと言い訳がつくと思います。:-)