5 шагов, чтобы писать лучше, CSS Часть II
Это вторая часть из 5 шагов, чтобы писать лучше, CSS. Есть множество учебников CSS можно ознакомиться на Интернет, но несколько учебников являются полезными. В этом учебнике вы найдете 5 шагов, чтобы писать лучше, CSS код для вашего следующего сайте проекта. Надеюсь, вам понравится этот урок.
1. Держите CSS заявления в одну линию
Вы должны всегда держать CSS заявления в одну линию, она помогает в сохранности ваших CSS файлов чистыми и меньше. Она также помогает удалить нежелательные пробелы и символы.
Код товара
; color : # 333333 ; background : #cccccc ; } h2 (Размер шрифта: 18px; COLOR: # 333333; фона: # CCCCCC;)
Неверный код
h2 ( Размер шрифта: 18px; ; COLOR: # 333333; ; color: # CCCCCC; )
2. Сочетают в себе элементы
Один из лучших способов сохранить строк кода является группировка селекторов. Есть некоторые приведенные ниже примеры того, что я имею в виду.
Код товара
H1, H2, H3 ( ; color : # 333 ; font-family: Arial, Helvetica, Sans-Serif; COLOR: # 333; )
Неверный код
h1 ( ; color : # 333 ; font-family: Arial, Helvetica, Sans-Serif; COLOR: # 333; ) h2 ( ; color : # 333 ; font-family: Arial, Helvetica, Sans-Serif; COLOR: # 333; ) h3 ( ; color : # 333 ; font-family: Arial, Helvetica, Sans-Serif; COLOR: # 333; )
3. Использование "маржа" в центре макета
Многие новички в УС не может понять, почему вы не можете просто использовать Float: центр для достижения этой центром влияния на блочные элементы. Если бы все было так просто! К сожалению, вы должны будете использовать.
Кодекс
# (Контейнеров ; /* top, bottom - and left, right*/ Маржа: 0 Авто / * верхний, нижний - и влево, вправо * / Ширина: xxxpx; )
4. Ваше CSS
Это отличная идея комментировать свой код в секции. Чтобы добавить комментарий, просто добавьте / * за комментарий, и * /, чтобы закрыть его, вот так:
Кодекс
/******** CODE START ЗДЕСЬ ********/
5. Использование CSS Сжать инструменты
Если вы не хотите тратить свое время в модификации старых стилей вы можете просто использовать интернет CSS сжимают инструмент, это сделают Вашу работу в считанные секунды.
проверить это онлайн CSS сжимают инструмент ...
Css Tidy
Чистота Css
Css оптимизатора
Flumpcakes Css оптимизатора
cssdrive Css Comperasor
W3C CSS Validator
Заключение
Таковы лишь некоторые из советов, которые помогут мне лучше писать код. Я надеюсь, что учебное пособие также поможет вам писать лучше и чистого кода. Применять эти советы на текущий и последующие проекты, и вы, несомненно, оценят усилия.
Если вы считаете, что учебное пособие может быть более лучшего, пожалуйста, поделитесь с нами. Комментарии нас
Если Вы хотели бы получать больше учебников у нас, пожалуйста, подпишитесь на наш канал по RSS или по электронной почте.
Рекламируйте нас
Статьи по теме:
если вам понравилось читать эту статью, следует ознакомиться с другими соответствующими статьями ниже:
Revell говорит по: 27 ноября 2009 в 9:05 утра сказал:
Привет,
Прежде всего, хорошую статью! Есть не так много статей, которые Адрес письменном стиле CSS. У меня есть определенные мысли на первой точке, хотя. На мой взгляд, лучше использовать длинную стиль письма при разработке и сценарий "уменьшить" ваш CSS при использовании ее на живую среду.
Дэйв говорит по: 27 ноября 2009 в 10:06 утра сказал:
Я полностью согласен с точкой 1. Если у вас есть 3 декларациями, 1 строку кода велик, но когда есть 6 или 7, он получает очень трудно читать.
Все, что для сохранения Может 1KB? Я не понимаю.
Другой чем тот, неплохие идеи.
Последний Блог Дейва .. 2 должна более-CMS имеют благоприятные плагины для WordPress
Fasce Nicolo 'говорит по: 27 ноября 2009 в 10:34 утра сказал:
Я согласен с Дэйвом, пункт 1 не так, просто потому, что, если вы работаете в команде, очень трудно читать одну строку кода.
Вы также должны написать код в алфавитном порядке для той же цели.
EJ Semeijn говорит по: 27 ноября 2009 в 10:57 утра сказал:
Почему мы остановились Размещая эти советы? Интернет уже полон этих основах советы. И я также согласен с № 1. Он не делает ваш код легче понять, он просто делает его более сложным.
Мои советы будут ставить структура веб-страницы в вашем CSS, сделать разделы для RESET, заголовки, формы, Элементы HTML, шрифты и т.д. Таким образом, ваш CSS будет легче понять.
safetycopy говорит по: 27 ноября 2009 в 9:38 вечера сказал:
Я согласен с замечаниями ряда других людей - 1 точка's плохой пример кода не плохой код - это просто альтернативный стиль. Эта должность будет только полезно для полных новичков, и мы не хотим, чтобы начать учить их неверные предположения уже!
Последний safetycopy блог .. Фото
Джош говорит по: 29 ноября 2009 в 4:38 утра сказал:
Я делаю все от них, за исключением последнего. Я не считаю полезным, чтобы сжать мои CSS, но в отличие от всех предыдущих читателей, я полностью согласен на пункт № 1. Я только начал писать CSS в одну линию, и это было огромным. Прокрутка была далека сокращен. Думаю, это личные предпочтения. То, что помогает в том, что я использую редактор обертывания код вниз на следующую строку, поэтому нет горизонтальной прокрутки.
Последний Джоша блоге .. Фанаты Flickr
FAQPAL говорит по: 29 ноября 2009 в 4:06 вечера сказал:
Хорошие советы начинающим, я не преуменьшать моей CSS либо, возможно, гораздо более крупный проект будет пользоваться minifying, но в среднем сайт действительно не нужно.
Насколько # 1, то я думаю, что формулировка является то, что люди бросали Off, вместо того, чтобы сказать: "Плохой кодекс", возможно, ему следует говорить, как safetycopy предложил, "заместитель кодекса".
Последний FAQPAL блог .. Bubble эффект с CSS
favSHARE говорит по: 30 ноября 2009 в 12:49 утра сказал:
Эта статья была распределяться на favSHARE.net. Идите и проголосует за это!
Последний favSHARE блог .. 25 Tutorials Web Layout
Жан-Патрик Смит писал: 11 декабря 2009 в 11:15 утра сказал:
Я обычно создает файл PHP, который включает все мои CSS файлов minifies он, и добавляет, сжатие + истекает заголовки.
Таким образом, я не согласен с точкой # 1 ...
Что важнее, чем все ваши CSS на одной линии сокращения числа вызовов с HTTP спрайты CSS и объединение всех ваших CSS / JS в один файл.