Мы принимаем к оплате:
«Подарочный сертификат» от нашего Учебного Центра – это лучший подарок для тех, кто Вам дорог! Оплате обучение и подарите Вашим родным и близким обучение по любому из курсов!!!
«Сертификат на повторное обучение» дает возможность повторно пройти обучение в нашем Учебном Центре со скидкой 1000 рублей!
А также:
Привести css в читаемый вид
Отформатируем HTML, CSS и JS автоматически в онлайн режиме
Порой нужно отформатировать взятый код из библиотеки или просто кусок из интернета и привести его в читаемый вид. Сделать это нам поможет отличный онлайне сервис по форматированию кода.
Зачем форматировать ваш код
Любой код должен быть читабельным и корректно отформатирован, чтобы четко прослеживалась иерархия, архитектура и было удобно его анализировать. Такой подход к работе поможет избежать массу ошибок и ускорит ее.
Отформатируем HTML, CSS и JS автоматически в онлайн режиме Возникают ситуации когда приходится скачивать сжатые js библиотеки или css стили, разобраться в таком формате сложновато. В сложившейся ситуации на помощь придет отличный онлайн сервис, со всеми нужными настройками.
Dirtymarkup – поможет привести в порядок ваш HTML, CSS, JS код.
Инструменты для форматирования CSS-кода
Любите ли вы свой CSS-код так, как люблю его я? Если да, то, несомненно, стремитесь к тому, чтобы он не только хорошо себя вёл и чувствовал, но и приятно выглядел. Надеюсь, что инструменты, описанные ниже, помогут вашему коду приблизиться к идеалу.
1. Styleneat
Вероятно, самый простой сервис из представленных в обзоре.Возможностей у инструмента не так много:
- Сортировка свойств по алфавиту
- Сортировка селекторов по алфавиту (если стоит галочка “Safe Organize” (безопасное форматирование) – этот параметр не доступен)
- Возможность выбрать стиль форматирования: многострочное или в одну строку
- Умеет вытягивать CSS-файлы, подключенные с помощью import, в основной файл и безжалостно их обрабатывать
- Можно передать код на обработку с помощью: текстового поля, загрузив файл или указав ссылку на CSS
- Результат можно забрать в виде CSS-кода или загрузить файл
2. FormatCSS
Не смотря на свой грозный вид, инструмент прекрасно справляется со своими функциями, коих у него предостаточно. Настроить можно многое:
- расстановку пробелов/табов/новых строк,
- сортировку свойств и имён селекторов,
- преобразование имён свойств и селекторов в нижний регистр и т.п.
3. CleanCSS
Достаточно мощный инструмент, предоставляющий в наше распоряжение множество возможностей: - Скормить CSS можно копипастом в поле “CSS-Code” или в виде ссылки на файл стиля
- Получить результат можно в виде текста или в файл
- На выбор пользователя предоставлены 4 типа форматирования исходника: код может быть оптимизирован для наименьшего размера или, наоборот, для лучшей читабельности. Есть возможность задать шаблон форматирования в поле “Custom temlate”
- Умеет объединять правила, приводить запись свойств к короткому виду
- Если необходимо – удалит комментарии и невалидные определения
- Как и вышеописанные сервисы, с радостью отсортирует всё, что душе угодно по алфавиту и преобразует в нижний/верхний регистр
4. ProCSSor
На мой искушенный взгляд – самое удобное из всего представленного в данном обзоре. Сервис встречает пользователя приятным интерфейсом и очень наглядными всплывающими подсказками, позволяющими очень быстро разобраться с настройками. Как и любой уважающий себя бьютифер, ProCSSor примет от нас код в поле ввода, в виде файла или ссылки. Отдаст результат в браузер и выведет ссылку на скачивание файла. Настроек у инструмента вполне достаточно, чтобы угодить практически любому пользователю, перечислять их не имеет особого смысла – лучше сразу попробовать. Приятной фичей сервиса является возможность сохранить свои настройки, чтобы в следующий раз можно было пропустить этап настроек и сразу перейти к процессу облагораживания.
Ещё одна достопримечательность – ProCSSor предоставляет API, с документацией можно ознакомиться здесь: http://procssor.com/apidoc.pdf.5. CSScomb
Проект нашего соотечественника, хабрапользователя miripiruni. CSScomb является инструментом для пересортировки CSS-свойств в заданном порядке, подробнее о возможностях можно узнать на этой странице. Из приятностей: - есть плагины для редакторов TextMate, Coda, Webstorm и IntelliJIDEA;
- существует возможность задавать и сохранять собственные настройки
5 способов улучшить ваш CSS
Практически любой человек сможет написать CSS-код, в наше время любая программа сделает это за вас. Но будет ли это хороший CSS? Далее представлены пять советов по совершенствованию вашего CSS
1. Reset
Обязательно используете сброс настроек в том или ином виде. Вы можете использовать уже готовые решения ( Eric Meyer, YUI), или придумать свое, выбирайте что больше нравится. Это может быть обычное удаление полей и отступов, у всех элементов:html, body, div, h2, h3, h4, h5, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0; }
Указанные выше готовые решения, конечно весьма впечатляют, но мне кажется что они немного чрезмерны. Я так и представляю себе, как вы сбрасываете все настройки у всех элементов, а затем заново их устанавливаете. Поэтому если вы решили использовать один из предложенных вариантов, не стоит полностью копировать весь CSS-файл, лучше измените его так, чтобы он максимально отвечал требованиям вашего проекта. И пожалуйста не делайте следующего:* { margin: 0; padding: 0; }
Этот прием увеличивает время обработки, и при удалении паддинга, некоторые элементы будут отображаться некорректно (например radio button). Элементы форм, при удалении всех настроек, могут вести себя непредсказуемо, поэтому сброс к ним лучше не применять.2. Алфавитный порядок
В каком из примеров по вашему мнению быстрее можно найти свойство margin-right?Пример 1
div#header h2 { z-index: 101; color: #000; position: relative; line-height: 24px; margin-right: 48px; border-bottom: 1px solid #dedede; font-size: 18px;}
Пример 2
div#header h2 { border-bottom: 1px solid #dedede; color: #000; font-size: 18px; line-height: 24px; margin-right: 48px; position: relative; z-index: 101;}
Согласитесь, что во втором примере свойство находится быстрее. Расположив свойства в алфавитном порядке, вы создадите эту последовательность, которая поможет вам сократить время, затрачиваемое на поиск специализированного свойства. Я знаю множество людей, располагающих CSS-свойства разными способами, но в нашей компании мы пришли к соглашению, располагать все свойства в алфавитном порядке. Это помогает, когда приходится работать с кодом, написанным другими людьми. Мне досадно каждый раз, когда приходится работать с css-файлом, в котором свойства не расположены по алфавиту.3. Группировка
Вы должны организовать ваш CSS-файл так, чтобы искомые объекты и связанные с ними свойства располагались рядом, также эффективно использование комментариев. Вот например мой способ группировки:/*****Reset*****/ Remove margin and padding from elements /*****Basic Elements*****/ Define styles for basic elements: body, h2-h6, ul, ol, a, p, etc. /*****Generic Classes*****/ Define styles for simple things like floating to the sides, removing a bottom margin on elements, etc Yes, these may not be as semantic as we would all like, but they are necessary for coding efficiently /*****Basic Layout*****/ Define the basic template: header, footer, etc. Elements that help to define the basic layout of the site /*****Header*****/ Define all elements in the header /*****Content*****/ Define all elements in the content area /*****Footer*****/ Define all elements in the footer /*****Etc*****/
Continue to define the other sections one by one
Использование комментариев и группировка схожих элементов, помогает быстро находить необходимые объекты и их свойства.4. Последовательность
Какой бы способ написания кода вы не выбрали, придерживайтесь его. Меня уже тошнит от CSS-дебатов посвященных выбору правильного способа написания кода, 1-строчное против многострочного. Каждый имеет право на свое собственное мнение, так что выберите наиболее удобный для вас и используйте его во всех CSS-файлах. Лично я использую комбинацию обоих способов. Если селектор содержит больше трех свойств, я разбиваю его на несколько строк.div#header { float: left; width: 100%; } div#header div.column { border-right: 1px solid #ccc; float: right; margin-right: 50px; padding: 10px; width: 300px; }
div#header h2 { float: left; position: relative; width: 250px; }
5. Начните правильно
Не начинайте писать css-стиль, пока не закончена разметка страницы. Прежде чем создавать CSS-файл, я пишу всю разметку страницы начиная от открывающего тега body, до закрывающего. Я не добавляю лишних div-ов, id и классов, только некоторые характерные блоки, типа header, content, и footer. Используйте наследование CSS-селекторов, для расположения дочерних элементов, не добавляйте автоматически классы и id к элементам. Помните главное: CSS ничего не стоит без хорошо отоформатированного документа.Это далеко не полный список некоторых советов, которые помогают мне писать лучший код. А какие советы используете вы?
Теги:7 полезных советов по написанию хорошего кода CSS
Написание вашего первого кода CSS может показаться очень необычным, если вы привыкли работать с таблицами или же никогда раньше не использовали стили.
Ниже приведены 7 разных методов, которые вы можете использовать, чтобы написать правильный и чистый код CSS, а также упростить процесс написания кода и быть уверенным, что вы получите результат быстро и эффективно.
1. Начинайте с CSS Reset
Написание кода CSS может стать нетривиальной задачей, когда вам приходится писать определённый код снова и снова, просто чтобы заставить различные браузеры отображать разметку одинаково. Вот где потребуется CSS Reset. При том, что этим приёмом пользуются такие гении CSS, как E. Meyer, нет причин не сбросить все ваши браузеры «в ноль» и начать строить стили заново.
Некоторые люди говорят, что стили CSS Reset бесполезны, но когда вы привыкнете сбрасывать стили элементов, с которыми вы работаете, станет гораздо проще обеспечивать их одинаковое отображение в различных браузерах.
2. Комментарии – ваши лучшие друзья
В плане поддержания ваших таблиц стилей чистыми и легко читаемыми, комментарии – великолепный способ поддерживать их структурированными и ясными.
При комментировании блоков кода, как в примере ниже, процесс просмотра стилей становится намного легче, потому что вы можете быстро прокручивать файл и искать код таких элементов как заголовок, боковая панель, контент и подвал в соответствующем блоке, отмеченном, например, следующим комментарием:
/********** Код верхнего заголовка **********/Такой способ комментирования не только сохранит ваше время при прокручивании кода, но также поможет вашим клиентам, когда вы передадите им код: они смогут легко найти нужные элементы и внести изменения сами, а не будут беспокоить вас по 5-6 раз в неделю ради простых 1-3 минутных изменений. Преимущества чистого кода CSS выходят далеко за пределы создания красиво выглядящего файла.
3. Делайте отступы в ваших правилах CSS для лучшего поиска
Когда вам нужно что-то найти среди 500 строк кода CSS, это может стать пыткой для ваших глаз. Поэтому вместо написания кода CSS в таком виде:
.your_classname { background: #F00; border: 0; color: #343434; float: left; margin: 0; padding: 0; }Вы можете сделать отступ для правил, чтобы сделать проще прокручивание файла и нахождение нужных деклараций классов и id.
.your_classname { background: #F00; border: 0; color: #343434; float: left; margin: 0; padding: 0; }4. Одно правило – одна строка… Несколько правил – несколько строк
Следуя этому простому методу, вы можете быстро навести порядок в ваших файлах CSS. Ниже вы видите два разных способа написания кода CSS. Некоторые люди стараются располагать каждое правило на новой строке, но я придерживаюсь указанного выше метода: одно правило = одна строка, а несколько правил = несколько строк.
.classname { border: 0; } .classname { background: #0F0; border: 0; color: #454545; float: left; margin: 0; padding: 0; }5. Изучите (и используйте) сокращённый код
Сокращённый код CSS позволит вам ускорить процесс написания, уменьшит беспорядок в ваших таблицах стилей и позволит вам находить нужные правила гораздо быстрее. Так почему же многие люди до сих пор пишут такой длинный код CSS?
.classname { margin-left: 1px; margin-right: 2px; margin-bottom: 4px; margin-top: 1px; }Написание этого кода в сокращённом формате делает его гораздо яснее. Сокращённый код использует направление по часовой стрелке, поэтому числа из примера ниже относятся соответственно к top, right, bottom, left.
.classname { margin: 1px 2px 4px 1px; }6. Пишите код CSS в алфавитном порядке, для упрощения чтения
Этот совет пришёл мне в голову совсем недавно, и я только начинаю использовать его постоянно, когда пишу код CSS. Расположение правил в алфавитном порядке позволит вам легко найти нужную строку кода, отредактировать её и двигаться дальше.
Посмотрите на код ниже и заметьте, что первые буквы правил идут в алфавитном порядке, что позволяет вам быстро пробежаться по списку и найти нужную строку. Ищете правило font-size? Ну, вы знаете, на каком месте в алфавите буква F, поэтому поиск этой строки будет гораздо проще.
.classname { border: 1px solid #dedede; color: #000; font-size: 18px; line-height: 24px; margin: 48px; padding: 0; position: relative; z-index: 101; }7. Используйте понятные имена классов и ID
Нет ничего хуже, чем редактировать кусок кода, когда он выглядит как-нибудь так:
.wackyblueline5 { ... } .leftsidesection { ... } #bodyleftcurve2 { ... }Выбор правильных названий для ваших классов и ID поможет вам лучше понять, где искать тот или иной элемент в ваших файлах таблиц стилей, а также в ваших html файлах. Я бы порекомендовал использовать примерно следующие осмысленные имена, которые помогут поддерживать ясный и понятный код:
.sidebar-title { ... } .postwrap { ... } .main-navigation { ... }Перевод статьи «7 Good Tips for Writing Better CSS» был подготовлен дружной командой проекта Сайтостроение от А до Я.
