常連

注目の的

社会貢献

自分が作っているCSSが良いか悪いか判断したいです。

例）セレクタの階層が深くない方がパフォーマンス的にもメンテナンス性にも優れていることは分かります。
しかし、どこがどれほど深くなっているのか、探すのは大変です。
・一目でどこのセレクタの階層が深いのかが分かる
・どの程度まで階層を浅くすればいいのかが分かる（何か指標となる深さがあって、その指標を超えているか否かが分かる）

例）繰り返し出現する要素（複数のCSSファイルで上書きが繰り返されている等の要素）がどれくらい出現し、どれくらい減らせばいいかが分かる

などが一目で分かるツールがあれば嬉しいですが、
そもそも上に挙げた例で判断するのが正しいか間違っているかも分かりません。

自分が使っているCSSが良いか悪いか、どうやって判断するのが良いのでしょうか？

自分が作っているCSSが良いか悪いか判断してくれるツールや指標はありませんか？

###前提・実現したいこと
slick.jsのスライダーを内包したタブメニューを作成しています。
レスポンシブで、各タブの要素の高さが可変するのですが、
①タブの切り替えに合わせてコンテンツの高さを取得したいです。
また上下にタブを設置しているので、
②上下のタブのactiveクラスを連動させたいです。
**→②は解決できました。**

どなたか分かる方がいらっしゃいましたら、ご教授よろしくお願いします。
###発生している問題・エラーメッセージ
①タブを切り替えても、最初に表示されているタブコンテンツの高さが保持されてしまう。
②色々試したものの、結局できませんでした。orz
**→②は解決できました。**


###該当のソースコード
```HTML
<div class="standardMenu">
	<ul id="tabMenu" class="cf">
		<li><a class="tabActive" href="#page01">tab01</a></li>
		<li><a href="#page02">tab02</a></li>
		<li><a href="#page03">tab03</a></li>
		<li><a href="#page04">tab04</a></li>
	</ul>
</div>

<div id="tabContent">
	<div id="page01" class="mainBodyBox tabBox">
		<h4>ここはtab01コンテンツです。</h4>
		<h5 id="page01_1">小見出し小見出し小見出し小見出し</h5>
		<div class="contentsSlider">
			<div class="contentsSlider_slide slide_01">
				<div><img src="images/dummy01.jpg" /></div>
				<div><img src="images/dummy02.jpg" /></div>
				<div><img src="images/dummy03.jpg" /></div>
				<div><img src="images/dummy04.jpg" /></div>
			</div>
			<div class="contentsSlider_thum thum_01">
				<div><img src="images/dummy01.jpg" /></div>
				<div><img src="images/dummy02.jpg" /></div>
				<div><img src="images/dummy03.jpg" /></div>
				<div><img src="images/dummy04.jpg" /></div>
			</div>
		</div>
		<p class="txt">ダミーテキスト。このテキストはダミーです。ダミーテキスト。このテキストはダミーです。ダミーテキスト。このテキストはダミーです。</p>
	</div>
	<div id="page02" class="mainBodyBox tabBox">
		<h4>ここはtab02コンテンツです。</h4>
		<h5 id="page02_1">小見出し小見出し小見出し小見出し</h5>
		<div class="contentsSlider">
			<div class="contentsSlider_slide slide_02">
				<div><img src="images/dummy01.jpg" /></div>
				<div><img src="images/dummy02.jpg" /></div>
				<div><img src="images/dummy03.jpg" /></div>
				<div><img src="images/dummy04.jpg" /></div>
			</div>
			<div class="contentsSlider_thum thum_02">
				<div><img src="images/dummy01.jpg" /></div>
				<div><img src="images/dummy02.jpg" /></div>
				<div><img src="images/dummy03.jpg" /></div>
				<div><img src="images/dummy04.jpg" /></div>
			</div>
		</div>
		<p class="txt">ダミーテキスト。このテキストはダミーです。ダミーテキスト。このテキストはダミーです。ダミーテキスト。このテキストはダミーです。</p>
		<h5 id="page02_2">小見出し小見出し小見出し小見出し</h5>
		<div class="contentsSlider">
			<div class="contentsSlider_slide slide_03">
				<div><img src="images/dummy01.jpg" /></div>
				<div><img src="images/dummy02.jpg" /></div>
				<div><img src="images/dummy03.jpg" /></div>
				<div><img src="images/dummy04.jpg" /></div>
			</div>
			<div class="contentsSlider_thum thum_03">
				<div><img src="images/dummy01.jpg" /></div>
				<div><img src="images/dummy02.jpg" /></div>
				<div><img src="images/dummy03.jpg" /></div>
				<div><img src="images/dummy04.jpg" /></div>
			</div>
		</div>
		<p class="txt">ダミーテキスト。このテキストはダミーです。ダミーテキスト。このテキストはダミーです。ダミーテキスト。このテキストはダミーです。</p>
		</div>
	</div>
	
</div>

<div id="tabMenu_bottom" class="standardMenu">
	<ul id="tabMenu" class="cf">
		<li><a class="tabActive" href="#page01">tab01</a></li>
		<li><a href="#page02">tab02</a></li>
		<li><a href="#page03">tab03</a></li>
		<li><a href="#page04">tab04</a></li>
	</ul>
</div>

```
```javascript
//タブ
$(function(){
	$(window).on('load resize', function(){

		var w = window.innerWidth ? window.innerWidth: $(window).width();
		var x = 767;
		var tabContent_01 = $("#tabContent #page01").outerHeight();
		var tabContent_02 = $("#tabContent #page02").outerHeight();
		var tabContent_03 = $("#tabContent #page03").outerHeight();
		var tabContent_04 = $("#tabContent #page04").outerHeight();
		var tabContent = $("#tabContent .tabBox:visible").outerHeight();

		if (w <= x) {//ウィンドウサイズが767px以下の場合（SP）
			$("#tabContent #page01").css("height", tabContent_01);
			$("#tabContent #page02").css("height", tabContent_02);
			$("#tabContent #page03").css("height", tabContent_03);
			$("#tabContent #page04").css("height", tabContent_04);
			$("#tabContent").css("height", tabContent);//■1

			$(function() {
				$('#tabMenu li a').on('click',function(){
				$("#tabMenu li a").removeClass("tabActive");
				$(this).addClass("tabActive");
				$(".tabBox").css("visibility", "hidden");//■2
				$(".tabBox").css("height", "0px");
				$($(this).attr("href")).css("visibility", "visible");
				$($(this).attr("href")).css("height", "auto");
				$("#tabContent").css("height", tabContent);//■3
					return false;
				});
			})
		}
	});
});

//スライダーslick.js
$('.slide_01').slick({
	slidesToShow: 1,
	slidesToScroll: 1,
	arrows: false,
	fade: true,
	asNavFor: '.thum_01'
});
$('.thum_01').slick({
	slidesToShow: 4,
	slidesToScroll: 1,
	dots: false,
	focusOnSelect: true,
	asNavFor: '.slide_01'
});
//以下、スライダーが複数続きます。
```
```CSS
/*タブ*/
#tabMenu { position: relative; width: 100%; overflow: hidden; height: 40px;}
#tabMenu li { position: absolute; bottom: 0; float: left; width: 25%;}
#tabMenu li a { display: block; height: 30px; color: #fff; font-size: 11px; text-align: center; line-height: 30px; background-color: rgba(153,119,38,0.5); border-right: 1px solid #fff;}
#tabMenu li:last-child a { border-right: none;}
#tabMenu li:first-child { left: 0;}
#tabMenu li:nth-child(2) { left: 25%;}
#tabMenu li:nth-child(3) { right: 25%;}
#tabMenu li:last-child { right: 0;}
#tabMenu li .tabActive { height: 40px; color: #997726; line-height: 40px; background-color: #fff; border: 1px solid #997726; border-right: 1px solid #997726 !important; border-bottom: none;}
#tabMenu_bottom ul { height: 30px;}
#tabMenu_bottom ul li { height: 30px;}
#tabMenu_bottom ul li a { height: 30px;}
#tabMenu_bottom ul li .tabActive { height: 30px; line-height: 30px; border: 1px solid #997726; border-bottom: 1px solid #997726 !important;}
/*tabContent*/
#tabContent { position: relative; width: 100%;}
#tabContent .tabBox { position: absolute; top: 0; width: 100%;}

```
###試したこと
タブコンテンツの中にスライダーが入っているので、
通常のhideやdisplay:noneでのタブが実装できない。
（そうするとタブを切り替えた時にスライダーが表示されない）
なので、なんとかスライダーの高さを維持したまま、visibilityで処理している。（■2）
■1で#tabContentの初期の高さを取得しているのを、
■3で切り替わったコンテンツの高さに合わせて高さを更新したいつもり。
が、まったく動いていないのでずっと初期の高さが保持されてしまっている状態です。

activeクラスの上下タブ連動に関しては手付かずの状態です。
**→上下タブ連動は解決できました。**

高さの可変するタブのコンテンツ（スライダー入り）の高さを取得し、即時反映させたい。

お世話になります。

HTMLファイルをiphone上で開くことはできますか？
モックアップをサーバ等にアップせずに確認を行いたいです。

よろしくお願い致します。