プログラミング初心者が先輩からもらったHTML/CSS/JSに関するフィードバックまとめ（IP）

規則やルールなどは自分の関わっているチームによって異なると思いますので掻い摘んで読んで頂けたらと思います。

全体構成に関するフィードバック

1. 同じ記述はパーシャルに切り出して書く。コードを再利用すること！
2. 上下でクラスを若干分けていたの意図はわからないけど、リファクタしたら統一してもちゃんと動作したので統一した方が良い。
3. 基本的なHTMLのマークアップ規則とCSSの命名規則を守る
4. 今回の場合はsocialボタンとして独立したコードを作るから、viewもscssも独立したファイルを作って管理した方があとから見る人もわかりやすい
5. .clearfixは単体で要素を作るために存在するのではなく、特定の要素に追記して使う
6. タグの名前はなるべく.や#から始めるように心がける
7. インデント、スペースの配置場所を意識する（手帳を参照）
8. CSSで指定するとき、個別の名前で指定できるときはそうする
9. 画像周りの余白を調整するときは<br>よりもCSSのmarginで調整したほうがきれい

基本的なHTMLのマークアップ規則とCSSの命名規則を守る

CSSはどのファイルからでも同じクラス名に適用されてしまう。意図しない場所にCSSが効いてしまい、バグを起こさないように冗長に書くことを意識している。また、クラス名単体で何を意図しているかもわかりやすくする。xxx-wrapperなどはよく使う。ソースコードを読んで、どういうクラスが使われているかはなんとなく頭に入れておくと自分で書くときにも良い。

参考: Google HTML / CSS Style Guideを翻訳してみた。

.clearfixは単体で要素を作るために存在するのではなく、特定の要素に追記して使う

example.html

 //BAD
ol.social-share_wrapper
　li.social-share_twitter
　　= link_to hogehoge
　li.social-share_twitter
　　= link_to hogehoge
　li.social-share_twitter
　　= link_to hogehoge
.clearfix

 //GOOD
ol.social-share_wrapper.clearfix
　li.social-share_twitter
　　= link_to hogehoge
　li.social-share_twitter
　　= link_to hogehoge
　li.social-share_twitter
　　= link_to hogehoge

htmlについて学んだこと

1. clearfixとは
2. floatとは
3. bottomとは
4. overfloatとは
5. rails viewhelperのlink_toを使う
6. wrapperとは
7. position relateiveとabsoluteとは
8. \tと\nとは

JS/jQuery周辺について学んだこと

1. .size()とは
2. .offset()とは
3. .addClass()
4. .removeClass()
5. 現在のURLを取得

.size()とは

Do I use .size() or .length in Javascript?より

size.js

size: function() {
      return this.length;
}

基本的には.length()と同じ

.offset()とは

要素の表示位置を取得／設定するには？（offset）

要素のドキュメント上の表示位置を取得／設定する

jQuery offset() Methodでは

Return the offset coordinates of a

element:
p要素の表示位置を取得する

と書かれています。
なので例えば$('#var').offset().topだとvarのトップにある要素の表示位置ということですね。

.addClass()

jQuery addClass() Methodによると

Add a class name to the first <p> element:
最初のp要素にクラスを追加する

addclass.js

$("button").click(function(){
$("p:first").addClass("intro");
});

## `.removeClass()`

<a href="http://www.w3schools.com/jquery/html_removeclass.asp" target="_blank">jQuery removeClass() Method</a>より

>Remove the class name "class_name" from all `<p>` elements:
>p要素から`class_name`がついたクラスを全て取り除く

>```removeclass.js
$("button").click(function(){
    $("p").removeClass("class_name");
});

現在のURLを取得

jQuery　色々な自分自身の○○を取得するによると

location.hrefで取得できるとのこと。