Виталий Инчин ☢

.button{
   opacity: 0;
   position: fixed;
   color: white;
   font-size: 70px;
   visibility: hidden; 
   text-align: center;
   transition: all 0.5s; 
   background: #343434;
   border-radius: 70px;
   display: inline-block;
   right: 50px; bottom: 30px;
   width: 70px; height: 70px;   
}

.visible{
  visibility: visible;
  opacity: 1;
}

<a href="#toTop" class="button">↑</a>

(function($scrollButton, $win){

  $(document).scroll(function(){
     $scrollButton.toggleClass("visible", $win.scrollTop() > 300);
  });

  $scrollButton.click(function(e){
       e.preventDefault();
       $("body, html").animate({scrollTop : 0}, 500); 
  });

})( $(".button"), $(window) );

jsfiddle.net/In4in/fLfL6n4j

habrahabr.ru/post/151320

К примеру, поместить после за-float'ченого блока еще один с clear: both; (можно и псевдоэлемент).

А вообще, вот статейка.

Я выношу подобный шлак в отдельные классы. Именую их типа .__cs_name.

.__cs_colCCC:hover{
  background: #CCC;
}

/* Ну или */

.__cs_gray{
   background: #CCC;
}

Но не всегда можно так вот сгруппировать, вся фишка в приоритете селекторов, в том, в какой последовательности они стоят в коде.

Одно в другое и vertical-align: center;.

Та-дам

Так? Или еще круче?

Вот так'c.

Я стараюсь делать так:

.wrapper{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

То есть, на экранах меньше 1200px будет растягиваться, а на тех, что больше - просто центрироваться.

На каждый элемент можно навешивать несколько классов, перечисляя их через пробел:

<div class="one two"></div>

.one{
   color: red;
}

.two{
   background: tomato;
}

Вредно? Чем же это может быть вредно? Такая же единица измерения, как и остальные, не кусается, не плюется, делает все, что от нее требуется.

Это как говорить, что вредно все измерять в дюжинах, дюймах или вообще в π. Каждой единице - свое место употребления.

А вот на сколько вредно неумелое ее использование - уже другой вопрос.

Двумя элементами: ± тут ±

Повесить общий обработчик на форму и объединить все кнопки 1 классом (.send_button). Кнопки, кстати, лучше положить в .form_group, это будет логичнее. И тогда:

$("form").on("focus", ".form_group > input", function(){
   $(this).next(".send_button").fadeIn();
}).on("blur", ".form_group > input", function(){
   $(this).next(".send_button").fadeOut();
});

И почему не работает функция on('change')? Если я хочу чтобы кнопка появлялось только когда в инпуте написали.

«Когда в инпуте написали» - это oninput, а onchange это изменение + потеря фокуса.

var allWidth = 0;

[].forEach.call(document.querySelectorAll("li"), function(e){
   allWidth += e.offsetWidth;
});

alert(allWidth);