Для полноценной работы по созданию сайтов вам обязателньо необходим хороший удобный редактор для PHP, HTML, CSS, JavaScript
Допустим, у нас есть список новостей. Между новостями отступ в 20 пикселей. Что можно увидеть чаще всего?
.list .item {margin-top:20px;}
.list .item:first-child {margin-top:0;}Не стоит так делать. Во первых, можно уложиться в одно правило, во вторых можно обеспечить поддержку практически всех древних браузеров (а многие из них не поддерживают :first-child). Вот так будет лучше:
.list .item + .item {margin-top:20px;}При этом ни внешний вид, ни логика работы не меняются. Мы просто облегчаем себе жизнь.
Есть небольшой трюк с вертикальным выравниванием элемента относительно родителя. Даже если в контейнере много текста и он переносится на следующую строчку, текст и сам элемент будет выровнен вертикально по центру.
Он заключается в создании невидимого элемента (в нашем случае оранжевая плашка специально сделана видимой) с нулевой шириной и фиксированной высотой. Этот элемент помещается перед выравниваемым контейнером. И элементу и контейнеру задается vertical-align:middle; На этом магия кончается. Данный способ работает во всех браузерах начиная с IE7.
.valign-example > i {display:inline-block; width:0; height:100px; vertical-align:middle;}
.valign-example > i + * {display:inline-block; vertical-align:middle;}Часто можно видеть как пытаясь расширить область клика на подписи к чекбоксу верстальщик играет с паддингами пытаясь не слишком сильно отодвинуть <label> от <input type="checkbox" />. Зачастую можно воспользоваться более универсальным способом и просто обернуть <input> в <label> вот так:
<label><input type="checkbox" /> Подпись к чекбоксу вся кликабельна</label>Тогда вся область <label> по клику будет переключать чекбокс. Атрибут for при этом можно вообще не указывать, ничего от этого не пострадает.
Времена когда браузеры еле поворачивались на десяти строках JS прошли. Теперь для плавной смены цвета кнопки совсем не нужно писать на JavaScript. Достаточно написать ровно два CSS правила. Одно для обычного состояния кнопки. И еще одно для :hover состояния. Всю анимацию возьмет на себя браузер. Это легко и просто, тем не менее многих банально забивают на подобные возможности и громоздят тонны ненужного JavaScript. Можно плавно анимировать практически любое CSS свойство с некоторыми ограничениями и исключениями (это уже выходит за рамки статьи), например так:
.button {background:#f00; -webkit-transition:0.3s background-color linear; -moz-transition:0.3s background-color linear; -o-transition:0.3s background-color linear; -ms-transition:0.3s background-color linear; transition:0.3s background-color linear;}
.button:hover {background:#0f0;}Теоретически можно вообще обойтись одним свойством (которое без префикса), но если вам нужна поддержка пары древних Firefox, Android 2, Opera 12- и т.п., то можно использовать префиксы как в примере выше.
На самом деле потенциал свойства transition гораздо выше. С его помощью можно делать потрясающие вещи, поэтому я очень советую понять как оно работает. Например, левое меню этого сайта сделано исключительно на transition.
Довольно спорный совет, но потерпите немного, дочитайте до конца его плюсы, а потом решайте стоит плеваться или нет.
Во первых повышается читабельность CSS стилей. У вас перед глазами помещается гораздо больше стилей чем обычно и по ним гораздо проще искать нужное правило глазами. Больше почти не придется пользоваться Ctrl+F для поиска нужного правила.
Во вторых появляется повод писать более короткие и лаконичные правила. У меня в ST2 экран разделен на две области по вертикали. Получается, что для каждого файла используется половина стандартного экрана. При этом правила у меня редко переносятся на вторую строку и то в основном из-за длинных селекторов или кучи префиксов.