7 советов по организации CSS


Содержание
Такой код более оптимизирован, весит меньше, а также занимает меньше строчек, благодаря чему он очень удобен в плане навигации по файлу стилей (не приходится прокручивать огромное полотно, чтобы найти нужный элемент кода). Но для того, чтобы быстро находить нужные свойства в таком варианте, нужно сначала научиться ориентироваться в нем. Вторая группа — это те, кто каждому свойству отводит свою собственную строчку. Такой код менее оптимизирован, файл, содержащий код такого вида, больше весит по сравнению с первым вариантом, но зато он более нагляден, здесь найти нужное свойство не составит труда. И в то же время он не так удобен в плане навигации по всему файлу стилей (приходится долго отматывать, чтобы найти нужную строчку). Обе эти группы правы по-своему. Просто помните о том, что вам нужно выбрать тот способ, который нравится и будет удобен именно вам. Это самое главное. Совет 2. Постоянство в названиях элементов. Выработайте в себе привычку назвать одни и те же элементы в разных файлах стилей одинаковыми именами. Это поможет вам не запутаться в коде и создаст определенный порядок в вашей голове. Сейчас объясню, что конкретно я имею ввиду. Например, каждый раз, когда я работаю с файлами стилей для разных проектов, для блоков с определенными функциями, я даю названия соответственно их предназначению (если это левый сайдбар, то я его называю sidebar-left, если это название для блока с логотипом — logo и т.д.) И сохраняю ту же самую «терминологию» для своих последующих работ, чтобы каждый раз не изобретать велосипед. Совет 3. Организуйте свой код по принципу «от верха к низу». Очень удобно, когда код организован «от верха к низу», то есть от шапки к подвалу. Самый удобный вариант лично для меня: Общие классы (body, a, p, h1, ul, li и т.д.) Основные блоки сайта (структура) Шапка сайта Меню Контент Сайдбар и виджеты Подвал Таким образом, и зрительно, и логически вам будет более удобно ориентироваться в своем файле стилей, чем при хаотичном расположении элементов. Совет 4. Объединяйте элементы по одинаковым свойствам. Часто некоторые элементы в файле стилей имеют целый ряд одинаковых свойств. Вместо того, чтобы несколько раз прописывать один и тот же код, почему бы не объединить их вместе и не прописать для них общие свойства? Например, для элементов, которые имеют один и тот же цвет текста и шрифт: А позже вы сможете добавить уже конкретные свойства для каждого из них, выписав их по отдельности. Совет 5. Комментируйте свой код. Замечательной особенностью CSS (наряду с другими языками программирования) является возможность комментировать свои записи, используя знак /* перед комментарием и знак */ после комментария: Такие комментарии будут служить для вас верными якорями при чтении и редактировании кода. Совет 6. Применяйте знание алфавита. Располагайте свойства для каждого элемента по алфавиту. Возможно, поначалу это будет занимать у вас какое-то время, но впоследствии вы привыкнете к этому, будете уже знать, что за чем идет, и уже без проблем найдете нужное свойство, если вам будет нужно его отредактировать. Совет 7. Будьте аккуратны. Еще один совет — будьте аккуратны, старайтесь, чтобы написанный вами код всегда смотрелся ровно и красиво, чтобы в нем не было лишних и непонятных отступов, или наоборот, «наездов» одного элемента на другой. Самим будет приятно и не стыдно другим показать. Ну вот, я поделилась некоторыми идеями с вами, которые помогают лично мне писать красивый, удобный для последующего чтения и редактирования код. Напоследок хочу сказать, что если вы не хотите, вам совсем не обязательно применять на деле все то, о чем я говорю. Просто это ценные советы, которые помогли лично мне привести в порядок мои файлы стилей и организовать мое мышление в этом плане. У вас может быть свой собственный стандарт написания кода, и когда вы его создадите, то непременно, вы станете более компетентным сss-мастером, с легкостью пишущим и читающим код. Только не забывайте, пожалуйста, и других вебмастеров, кто, возможно, будет иметь дело с тем, что вы написали, и чтобы вам не пришлось краснеть за содеянное, позаботьтесь о том, чтобы ваш CSS-код был удобным для чтения и редактирования.
  • 6) .clearfix
  • 7) color: rgba()
  • 8) input[type=»text»]
  • 9) transform: rotate(30deg)
  • Организация CSS-файлов: Совет 1 — Флаги
  • Группируем CSS-правила
  • Как их быстро отыскать?
  • Простейшее решение: Флаги
  • 7 советов по написанию удобного CSS-кода
  • 7 результативных советов по написанию удобного для чтения и редактирования CSS-кода.
  • Совет 2. Постоянство в названиях элементов.
  • Совет 3. Организуйте свой код по принципу «от верха к низу».
  • Совет 4. Объединяйте элементы по одинаковым свойствам.
  • Совет 5. Комментируйте свой код.
  • Совет 6. Применяйте знание алфавита.
  • Совет 7. Будьте аккуратны.
  • 7 советов по организации CSS

    В этой статье мы хотим поделиться с вами коллекцией из 20 полезных конвенций и передовой практики, рекомендованных сообществом CSS. Некоторые из них больше ориентированы на начинающего веб мастера, а также для продвинутого пользователя, где надеемся, что каждый найдет классный способ по стилистике, о котором не знали. Ниже приведены несколько советов и советов CSS, которые, как я думаю, должны знать каждый веб-разработчик. Возможно, вы уже знаете многие из этих трюков. Возможно, вы уже знаете многие из этих трюков.

    При разработке веб-сайта рекомендуется следовать набору лучших практик и полезным соглашениям, рекомендованным сообществом CSS. Как интерфейсный веб-разработчик, вы, вероятно, столкнулись с некоторыми проблемами с кодированием, которые вы позже поняли, могли быть решены простым современным CSS. Вот почему использование этих простых советов и трюков сэкономит вам много времени и беспокойства, когда вы создадите свой удивительный сайт.

    Этот пост предназначен для объединения 20 лучших советов и трюков, которые вам, вероятно, понадобятся на ежедневной основе при создании маркетинговых активов.

    1. Круглые углы без изображений

    Вот простая методика CSS округления углов DIV с использованием некоторых атрибутов css. Этот метод будет работать в Firefox, Safari, Chrome и любом другом браузере, совместимом с CSS3. Этот метод не будет работать в Internet Explorer.

    Для округления определенного угла, как вверху слева или внизу справа, используйте таблицу стилей ниже.

    2. Создайте специальную таблицу стилей IE

    Создайте отдельную таблицу стилей и включите ее на веб-странице всякий раз, когда клиент использует Internet Explorer.

    3. Фоновое изображение текстового поля

    Вы видели текстовые поля с фоновыми изображениями, такими как поиск увеличительного стекла или других изображений. Просто используйте следующую таблицу стилей, чтобы добавить фоновое изображение в любое поле ввода.

    4. Установка минимальной ширины страницы

    Очень удобная команда CSS, которая существует, это команда min-width, в которой вы можете указать минимальную ширину для любого элемента. Это может быть особенно полезно для указания минимальной ширины страницы.

    Затем мы создаем наши команды CSS, чтобы создать минимальную ширину 600 пикселей:

    #container <
    min-width: 600px;
    width:expression(document.body.clientWidth 5. Прозрачность кросс-браузера

    Используйте следующую таблицу стилей, чтобы сделать элемент-трансперант, установив уровень непрозрачности.

    Цукерберг рекомендует:  Performance marketing лайфхаки для малого бизнеса

    6. Запретить прокрутку Firefox Scrollbar Jump

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

    7. Поворот текста с помощью CSS

    Этот пример поворачивает текст на 90 градусов против часовой стрелки.

    Свойство вращения фильтра BasicImage Internet Explorer может принимать одно из четырех значений: 0, 1, 2 или 3, которые будут вращать соответственно элементы 0, 90, 180 или 270.

    .rotate-style <
    /* Safari */
    -webkit-transform: rotate(-90deg);

    /* Firefox */
    -moz-transform: rotate(-90deg);

    /* Internet Explorer */
    filter: prog >>

    8. CSS для мобильных устройств

    Отдельный документ CSS можно создать для КПК и мобильных телефонов и активироваться только при использовании одного из этих устройств для доступа к вашему сайту. Все больше веб-сайтов создают отдельные документы CSS для печати, поэтому веб-страницы автоматически становятся удобными для печати, когда пользователи предпочитают печатать их. Вы также можете сделать то же самое для карманных устройств.

    Следующая команда используется для вызова документа CSS для карманных компьютеров:

    9. Изменить цвет выделения текста

    По умолчанию в качестве выбора текста браузер использует синий цвет. Вы можете изменить этот цвет в соответствии с темой вашего сайта.

    /* Mozilla based browsers */
    ::-moz-selection <
    background-color: #FFA;
    color: #000;
    >

    /* Works in Safari */
    ::selection <
    background-color: #FFA;
    color: #000;
    >

    10. Удалите пунктирные границы

    Пунктирные границы вокруг ссылок — это функция доступности, доступная большинству браузеров по умолчанию.

    11. Центрирование веб-сайта

    Большая часть веб-сайта использует этот метод для центра контента.

    Инструменты организации и приведения в порядок кода CSS


    Даже супер-опытным веб-мастерам, порой бывает не просто разобраться в чужих CSS файлах. Далеко не все разработчики утруждают себя тщательным структурированием и форматированием CSS кода. Да что греха таить, у многих вообще каша в голове и выходят из такой головы соответствующие творения.

    Потому, хотелось бы немного упростить себе жизнь при разработке новых проектов или переделке уже готовых CSS, автоматизировать часть работы, тем самым высвободив немного времени на другие ништяки. Правда следует учесть, что никакие автоматизированные инструменты не имеют представления о вашем личном уникальном стиле, применяемом при написании CSS, потому идеального для всех кода не получится.

    ProCSSor — настраиваемый процессор CSS

    «Прекрасный CSS отладчик для прекрасных web-сайтов» (мой вольный перевод слогана procssor). Действительно очень достойный инструмент.

    ProCSSor позволяет придать вашему CSS легко читаемый, понятный и настраиваемый стиль в соответствии с вашими требованиями. ProCSSor может сжимать CSS и создавая легкую версию сайта. Есть версия программы для Mac в Apple Store, но особой нужды в ней не вижу, вот если бы она могла анализировать и выявлять неиспользуемые CSS стили на сайте. но увы. Так что онлайн-версии вполне достаточно.

    CSS Compressor & Minifier

    На мой взгляд, инструмент несколько уступает в настройках предыдущему процессору и не знает о CSS3. Есть предустановленные настройки степни сжатия итогового CSS. В остальном функционал повторяет возможности ProCSSor.

    CSS Lint — помогает обнаружить ошибки CSS кода

    CSS Lint – этот инструмент, помогает определить проблемы внутри кода CSS. Проверяет базовый синтаксис, а также применяет к коду набор заранее определенных правил, выявляет признаки неэффективности. Необходимые правила можно выбирать самостоятельно или пропустить ненужные. Информация выдается на английском, но думая это составит особой трудности.

    Helium CSS – сканирование сайта на наличие неиспользуемого CSS

    Helium – интересный инструмент, написанный на javascript, позволяющий находить неиспользуемые CSS-стили на сайте. В первую очередь интересен при оптимизации сайтов, использующих различные универсальные фреймворки, к примеру широко известный Bootstrap.

    Helium CSS берет список URL-разделов сайта и, анализируя каждую страницу, выстраивает список всех встретившихся CSS-стилей сравнивая их с селекторами из таблиц стилей сайта. В конце генерируется подробный отчет по каждому селектору, которые не применяются на загруженных страницах.

    grunt-uncss — продвинутый плагин для удаления лишних CSS стилей на сайте

    О плагине для Grunt — uncss, который анализирует верстку и стили и позволяет не только избавиться от лишних селекторов в CSS, но и объединять и сжимать javascript на сайте я расскажу в отдельной статье. Тема очень интересная, но довольно сложная для новичков.

    Если считаете статью полезной,
    не ленитесь ставить лайки и делиться с друзьями.

    Как организовать css файлы?

    2 Sinal [2009-12-31 11:06:00]

    Когда мой сайт зависит от многих файлов css, я понимаю, что это беспорядок. Это означает, что я использую разные файлы css из другой команды, и я помещаю их вместе с моими. Хм, много файлов тогда!. Я завязываюсь с их организацией. У кого-то есть хорошее решение?

    7 ответов

    Вы можете использовать cssmerge, чтобы объединить файлы после удаления повторяющихся правил и свойств.

    0 Annie [2009-12-31 11:17:00]

    Мне очень интересно узнать, как люди группируют свои файлы CSS и предотвращают конфликты имен.

    Но я также думаю, что вы должны подумать о том, как вы упаковываете CSS для выпуска продукции. Это действительно зависит от используемой структуры и кода приложения, но в идеале у вас будет возможность указать, какие страницы зависят от того, какие файлы и какой шаг сборки объединяет файлы CSS для одной страницы и запускает их через YUI Compressor и выводит уникальное имя файла, включая контрольную сумму содержимого или дату, чтобы файл можно кэшировать неограниченно долго. (И тогда, конечно, вы поместите файл CSS вверху документа)

    Ваш подход «все в одной ванной» предполагает, что вы можете попирать определения CSS. Заказ, в который вы включаете каждый файл CSS, может значительно повлиять на ваш сайт.

    Вам нелегко ответить. Вам нужно заставить другую команду работать одинаково или, возможно, работать с ними, используя систему управления версиями, где вы все вносите CSS в одно место.

    0 Annie [2009-12-31 11:19:00]

    0 valli [2009-12-31 11:21:00]

    Вот несколько советов по слиянию и организации CSS вручную

    • Разделите код на разделы, такие как стили ссылок, общие классы, макет или структурные стили, заголовок, навигация, содержимое, нижний колонтитул
    • Отступающие потомки и связанные с ними правила Это позволяет вам более легко распознавать структуру страницы в вашем CSS и как элементы соотносятся друг с другом. Этот метод также может применяться для определенного тега, такого как тег заголовка.
    • Сжатие кода в одну строку Вместо того, чтобы иметь каждый атрибут в своей собственной строке, включите их все в одну строку. Это уменьшает размер файла вашего CSS файла, а также упрощает сканирование при поиске определенного тега.
    • Алфавитные атрибуты Кажется, это упрощает чтение моего CSS, когда Im просматривает его или ищет что-то.
    • Используйте стенографию, где это возможно Это упрощает чтение и понимание вашего CSS и намного эффективнее.
    • Reset ваш CSS Существует множество способов сброса CSS.
    • Используйте отдельные таблицы стилей CSS для разных элементов Имейте основную таблицу стилей, в которую вы импортируете других. У вас может быть таблица стилей только для типографии, другая для макета, а другая для цветов. Сохраняя эти элементы в собственных таблицах стилей, это упростит управление вашим кодом.
    • Объявлять цвета, используемые в верхней части ваших CSS файлов В комментариях CSS в верхней части кода вашего файла используются цвета, которые вы используете в своем файле, и цвет, который они представляют.

    0 3zzy [2009-12-31 11:51:00]

    Мне очень нравится styleneat.com. Только если это не веб-приложение.

    Вы можете увидеть мой ответ на аналогичный вопрос. Об именах и файлах и общей организации css.

    Как организовать правильную работу с CSS

    Вроде вопрос должен быть стандартным, да и CSS я вроде знаю совсем не плохо, но мне кажется я упустил что-то самое главное — это правильная организация работы страниц с CSS — сейчас буду говорить наверное глупости, но прошу меня выслушать.


    Как я организовываю работу с CSS файлами:
    1) Способ первый: если проект небольшой, то все помещаю в один файл.
    2) Если проект большой то пытаюсь для каждой страницы создавать свой CSS файл, рассчитывая сохранить хоть небольшую долю скорости загрузки страницы, отсюда и возникает первый вопрос и первая проблема. Вопрос: Если загружать всю страницу загружается ли весь файл CSS со свойствами для всех страниц или только то, что относится к стилям страницы? И правильно ли я делаю, что для больших проектов для каждой страницы делаю отдельный CSS файл? Но тут же возникает проблема если я использую page.master (это для проектов asp.net у других проектов более чем уверен есть аналоги этому, поэтому вы меня должны понять) то для каждой страницы то есть подслоя не получается добавить тег LINK в котором мы указываем этот путь к CSS файлу, потому что этот тег может добавляться только в тег HEAD

    Помогите мне решить столь простую проблему, или порекомендовать как правильно работать с CSS для проектов.

    На самом деле у меня вопрос на много глобальнее, но сейчас не успеваю отписать пост полностью, нужно торопиться на свадьбу друга. Между свадьбой буду задавать и другие вопросы, надеюсь до компа руки доберутся

    09.06.2012, 08:39

    Не могу организовать правильную работу счетчика
    Нужно чтобы все значения норм блоков T=norm(vect); заносились в массив Y(yi,yj) = T;,а потом найти.

    Не могу сделать правильную работу цикла
    Всем привет. Есть запрос к БД, возвращает данные в таком формате: array(3) < =>.

    Как организовать работу?
    помогите пожалуста как реализовать такое приложение на Visual C++ Оценка экспорта.

    Не выходит настроить правильную работу частотного фильтра
    Траблы в двух фильтрах, Полосовом и Фильтром Высоких Частот(ФВЧ). Ломаю голову уже вторую неделю.

    Логарифмическая спираль: реализовать правильную работу цикла
    Здавствуйте, подскажите пж как сделать логарифмическую спираль? Катинку мне выводить не надо, а.

    09.06.2012, 08:44 2

    Вроде вопрос должен быть стандартным, да и CSS я вроде знаю совсем не плохо, но мне кажется я упустил что-то самое главное — это правильная организация работы страниц с CSS — сейчас буду говорить наверное глупости, но прошу меня выслушать.

    Как я организовываю работу с CSS файлами:
    1) Способ первый: если проект небольшой, то все помещаю в один файл.
    2) Если проект большой то пытаюсь для каждой страницы создавать свой CSS файл, рассчитывая сохранить хоть небольшую долю скорости загрузки страницы, отсюда и возникает первый вопрос и первая проблема. Вопрос: Если загружать всю страницу загружается ли весь файл CSS со свойствами для всех страниц или только то, что относится к стилям страницы? И правильно ли я делаю, что для больших проектов для каждой страницы делаю отдельный CSS файл? Но тут же возникает проблема если я использую page.master (это для проектов asp.net у других проектов более чем уверен есть аналоги этому, поэтому вы меня должны понять) то для каждой страницы то есть подслоя не получается добавить тег LINK в котором мы указываем этот путь к CSS файлу, потому что этот тег может добавляться только в тег HEAD

    Помогите мне решить столь простую проблему, или порекомендовать как правильно работать с CSS для проектов.

    На самом деле у меня вопрос на много глобальнее, но сейчас не успеваю отписать пост полностью, нужно торопиться на свадьбу друга. Между свадьбой буду задавать и другие вопросы, надеюсь до компа руки доберутся

    12 советов – Как оптимизировать CSS код

    Язык CSS является довольно простым в освоении инструментом, но, как и любой другой язык, для профессиональной работы с ним необходимо соблюдать определенные правила, тогда с кодом и работать будет легче и размеры файлов получатся меньше. Сегодня я приведу советы, которые позволят оптимизировать CSS код вашего сайта и улучшить его восприятие для дальнейшей работы.

    Чаще всего, несоблюдение требований при написании кода приводят к двум последствиям:

    • Код получается плохо читаемым и в него очень сложно вносить коррективы, особенно, если это приходится делать вебмастеру, не являющемуся автором изначальной версии.
    • Объем кода получается слишком большим, что приводит к увеличению размера файлов и снижает скорость работы сайта.

    Избавиться от обоих недугов очень просто, достаточно соблюдать некоторые правила, вот они:

    1. Не используйте глобальный сброс.

    Использование глобального сброса стандартный margin’ов и padding’ов для всех HTML элементов совершенно недопустимо. И дело не только в том, что это медленно и неэффективно, но такой ход вынудит вас определять самому margin’ы и padding’и для всех элементов, которые в этом нуждаются. Вместо этого лучше используйте набор CSS ресетов для отдельных элементов и групп.

    Плохо

    Лучше

    2. Не используйте хаки для IE

    С помощью CSS хаков можно добиться правильного отображения сайта в старых браузерах, таких как IE6, но они же могут вызвать проблемы с более новыми версиями IE, например IE8, который довольно неплохо поддерживает стандарты CSS и использование хаков может привести к порче макета. Следует использовать условные операторы для определенных версий Internet Explorer.

    Например, следующий код, если его разместить в теге заставит iestyles.css загружаться только для Internet Explorer версий 6 и меньше.

    Об условных комментариях можно почитать подробнее в статье на quirksmode — CSS Conditional Comments (на английском)

    3. Используйте значимые имена для Классов и ID

    Представим, что для только что созданного сайдбара вы применили класс .leftbox, но потом передумали и переместили его на правую сторону сайта. Нелогично, не правда ли, для правого сайдбара иметь класс с именем .leftbox? Поэтому прежде чем назвать класс, нужно подумать над его именем, чтобы потом было легко понять его предназначение.

    4. Используйте наследование правил CSS

    Если несколько дочерних элементов используют одинаковые свойства, то было бы логично определить эти свойства для общего родителя этих элементов, и предоставить всю работу механизму наследования CSS. Таким образом Вы сможете легко обновлять свой код, а также уменьшите его размер.

    Плохо

    Лучше


    5. Объединяйте несколько селекторов

    Вы можете объединять CSS селекторы в одном правиле если у них одинаковые свойства. Это сохранит вам и время и размер файла.

    Плохо

    Лучше

    6. Используйте сокращенную запись

    Возможность использования сокращенной записи поможет быстро писать CSS код и уменьшит размер файла. Сокращенная запись доступна для свойств margin, padding, border, font, background, а также для значений цвета.

    Плохо

    Лучше

    7. Организуйте CSS код

    Организация CSS кода в определенном порядке облегчит, в последующем, поиск нужных фрагментов, чем сэкономит вам немало времени.

    Цукерберг рекомендует:  Вакансии КОМПЛИЦЕРТЕ ТЕХ

    Вот пример организации кода:

    8. Делайте CSS читаемым

    Написание читаемого CSS облегчит поиск и редактирование стилевых правил. Можно группировать стили селектора в одну строку или выделять для селектора отдельную строку. Конечно можно и комбинировать эти техники.

    9. Добавляйте комментарии

    Комментарии можно использовать для разделения секций CSS кода

    10. Сортируйте CSS свойства по алфавиту

    Возможно это несколько сложно писать CSS с учетом алфавита, зато это упростит поиск нужных стилей в дальнейшем.

    11. Используйте внешние таблицы стилей

    Всегда нужно стремиться отделять содержимое от представления. Размещайте весь свой CSS код во внешних таблицах стилей и затем используйте
    для подключения их к своей странице. Размещение кода во внешних файлах позволит вам легко изменять его в одном месте, а не изменять его во всех файлах где он использовался.

    Плохо

    Лучше

    12. Сжимайте CSS код

    После того как ваш код будет готов к эксплуатации, его необходимо сжать, например, с помощью cy-pr.com/tools/css/ , так вы уменьшите время загрузки сайта, за счет уменьшения размера файла.

    Заключение

    Надеюсь эти советы вам помогут при написании и редактировании кода. Оптимизированный CSS будет легче и приятнее править в будущем. Если по теме каскадных таблиц стилей вам есть что добавить или спросить – пишите в комментариях.

    7 советов по качественной верстке шаблона сайта

    Здравствуйте друзья! На носу новый год, а это один из моих любимых праздников. Сразу хочу поздравить вас с наступающим Новым годом и пожелать здоровья и успехов в наступающем 2013 году.

    Я уже писал об основных правилах дизайна сайта для дизайнеров, т.е. каким должен быть дизайн с точки зрения верстки. Теперь пришло время подкрутить гайки и верстальщикам.

    Любой верстальщик, когда берет работу под свою ответственность должен придерживаться неких правил, чтобы шаблон был качественным как с точки зрения посетителей, так и с точки зрения поисковых систем.

    Итак, какие же эти правила? Разберем их в семи шагах.

    1. Макет сайта.

    Минимальная ширина макета 1000 пикс, не зависимо, от того какой тип макета у нас — фиксированный или резиновый. Почему именно 1000 пикс? Ширина макета должна подстраиваться под популярное разрешение монитора и желательно без появления полосы горизонтальной прокрутки (лично я ее не люблю). На сегодняшний день это — 1024 x 768 пикс. Вычитаем из ширины окна браузера полосу вертикальной прокрутки и получаем ширину 1000 пикс. При уменьшении или увеличении окна браузера все должно смотреться также красиво, т.е. элементы сайта не должны ни куда расплываться или наезжать друг на друга. Макет сайта должен быть гибким – легким движением руки превращаем фиксированный макет в резиновый и наоборот. Делается это примерно так: создается общий каркас (контейнер) и внутрь него кладутся уже остальные блоки (шапка сайта, левая и/или правая колонки, меню и т.д.). Далее через файл стилей оперируем уже минимальной шириной основного контейнера.

    Нижний блок (подвал) сайта со счетчиками и копирайтами всегда должен быть прижат к низу. Проверить это можно, зажав клавишу Ctrl + прокручивая вниз колёсико мыши. Разрешение макета будет увеличиваться так, как на мониторе с высоким разрешением экрана. Чтобы вернуться в обычный режим нажмите комбинацию клавиш Ctrl + 0.

    2. Код.


    Что касается кода, то верстка должна быть полностью на дивах или как говорят блочная верстка. Данный пункт вообще надо было поставить на первое место, т.к. на мой взгляд, верстка на таблицах давно уже канула в прошлое.

    Код должен быть как можно простым и легко читаемым. Также следует использовать все принципы семантической верстки, т.е. использование тегов по их прямому назначению. Вот, к примеру, заголовки всех уровней H1-H6 – по иерархии заголовок первого уровня H1 должен всегда быть выше всех остальных, потом идет заголовок H2 и т.д. Списки должны быть списками – нумерованный (ol) и не нумерованный (ul). Вот еще пример: контактные данные, а именно адрес целесообразно будет заключить в теги (теги HTML5). В общем суть надеюсь вы поняли. Более подробно, что такое семантическая верстка вы можете почитать в интернете, вбив в адресную строку Яндекса или Гугла фразу «Семантическая верстка это…».

    Несколько слов о файлах стилей. При написании кода в файле стилей старайтесь разделять код по таким же блокам что и в html, т.е. стили для шапки сайта, стили для левой колонки, правой колонки и т.д. Желательно отделять осмысленными комментариями. Помните, что с данным кодом в дальнейшем могут работать и другие верстальщики, так, что они должны легко разобраться. Все файлы стилей желательно объединить в один единый. Сделать это можно через импорт (@import url(‘styles.css’);), предварительно сложив все файлы в общий каталог.

    3. Кроссбраузерность.

    Сверстанный макет должен одинаково смотреться во всех популярных браузерах и не забываем про старые версии. Основные браузеры, под которые я «затачиваю» свои макеты это – Firefox, Opera, Google Chrome, Safari, Internet Explorer 7, 8, 9. Для 6-го ИЕ (Internet Explorer) ставлю заглушку. Когда пользователь заходит на сайт, при помощи ИЕ 6.0, то для него открывается страница с информацией о том, что данный браузер устарел и что пора обновляться до более современных и ниже предлагаются ссылки на скачивание популярных браузеров.

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

    4. Графика.

    На любом сайте есть графика – это картинки, видео, флеш… К чему я это говорю? Представьте вы сверстали макет, заполнили его какими то демо-материалами и в результате вес одной вашей странички составил более 2 Мб. А ведь по сути на странице еще ничего нет и мы не знаем, что еще захочет разместить на ней владелец площадки. В общем – вся графика используемая при верстке должна быть оптимизирована под веб-формат. Желательно, чтобы одна картинка не весила более 50 кб. Картинки кнопок, стрелок и подобной графики, которая не имеет плавных переходов и теней желательно сохранять в формате GIF. Изображения, которые не имеют прозрачного фона сохраняйте в формате JPG, выбрав оптимальное соотношение качество и объема (вес файла). В Photoshop при сохранении файла для «Веб и устройств» это «Высокое качество — 60». Тоже касается и флеш-роликов, они должны обязательно оптимизированными. Если вы заказывали его флеш-мастеру, то обязательно расскажите ему про соотношение качества и объема файла.

    Проверить сколько у вас весит страничка после верстки вы можете, воспользовавшись плагином Firebug для Mozilla Firefox. Откройте Firebug, переключитесь во вкладку «Сеть» и обновите страничку. В самом конце списка вы увидите количество запросов и общий объем странички.

    5. Строгое соответствие макету PSD.

    Ваш сверстанный шаблон, должен строго соответствовать psd-исходнику. Дизайнер возможно на прорисовку одного элемента потратил какое то n-ое количество времени, а вы взяли и все испортили – сделали как вам удобно. В крайнем случае, если у вас что то не получается вы можете проконсультироваться по этому поводу с дизайнером, а также с менеджером проекта или с самим заказчиком.

    6. Соответствие стандартам W3C.

    Верстка сайта выполняется в соответствии с некоторыми стандартами, выпущенной консорциумом Всемирной паутины (W3C). Данная организация занимается разработкой и внедрением технических стандартов web-разработок. Так вот, ваш сверстанный дизайн должен придерживаться данных стандартов или как еще говорят пройти валидацию. Проверить шаблон на соответствие поможет специальное программное обеспечение, которое называется валидатор.

    Почему так важно, чтобы код сайта был валидным?

    Во-первых, валидный и красивый код, соответствующий всем стандартам, быстрее обрабатывается браузером и верстка будет отображаться одинаково во всех браузерах. Ведь разработчики браузеров придерживаются стандартов W3C при разработке своего продукта. Представьте, что каждый разработчик будет писать коды по своему. Тогда точно будет твориться полный хаос.

    Во-вторых, поисковые системы могут негативно относится к сайтам, код которых содержит ошибки. Чем больше ваш код соответствует политике консорциума W3C, тем лояльнее к вам будут относиться поисковики. Поэтому уделите этому аспекту внимание для продвижении сайта в поисковых системах.

    Больше всего валидатор может «ругаться» на старые теги, незакрытые, неправильно оформленные и т.д.

    Что хотелось бы добавить по поводу стандартов W3C, так это то, что придерживаться строго этим правилам вас никто не принуждает. Данные стандарты носят рекомендательный характер. Но последствия от их несоблюдения будут висеть на вашей совести.

    7. Проверка на наличие ошибок.

    Перед сдачей шаблона заказчику обязательно проверьте его на наличие ошибок. Ошибки могут быть разные. Обычно пользователь их может не заметить, а вот если вооружиться плагином Firebug, то их все можно отследить, перейдя во вкладку «Консоль».

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

    Ну вот в принципе и все что хотел сказать. Всем удачи! Всем пока!

    Заур Магомедов

    Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2009 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

    Организация CSS. CSS-ники

    Современные браузеры поддерживают работу множества технологий, в частности технологию оформления веб-страниц CSS (Cascading Style Sheets – каскадные таблицы стилей), необходимые для качественного оформления HTML и XHTML-документов. Организация CSS-файлов становится все более и более сложной, нужно знать целый ряд приемов и тонкостей, чтобы научиться их грамотно составлять.Прежде, чем создавая сайт, необходимо четко определиться, какой должна быть организация CSS-файла.

    Непосредственная организация CSS-файла начинается с того момента, когда нужно определиться с организацией самого сайта, то есть, из каких разделов он будет состоять, где будут храниться CSS-файлы и т.д. Существует несколько способов организации CSS, у них есть свои преимущества и недостатки, о каждом будет рассказано ниже.

    Обычно в начале работы с сайтом создается CSS-файл по умолчанию или стили начинают прописываться в самом HTML, это можно заметить, работая с графическими редакторами (Dreamweaver). Данный «CSS-ник» обычно содержит правила и стили, применяемые для всех страниц сайта. Однако данных стилей и правил минимальное количество, в дальнейшем пользователь должен будем сам определить, как ему нужно организовать CSS-файл.

    Метод 1: Создание прототипа (организация CSS для сайта в целом)

    Одной из популярных стратегий организации CSS – файлов является создание CSS-файла под каждую страницу в отдельности. Например, сайт имеет принципиально разные по дизайну главную и внутренние страницы, тогда будет удобно создавать отдельно CSS-файл для главной и внутренних страниц сайт. В этом случае, каждая страница будет импортировать свой собственный файл. Данный метод можно назвать несколько “прямолинейным”, поскольку каждый файл будет связан с определенной страницей. Его удобно применять в том случае, когда существует небольшое число страниц сайта. Между тем, данная стратегия является не состоятельной в том случае, если на страницах с определенной заранее структурой и стилями необходимо производить изменения.

    Что можно сделать с CSS?

    1. Создавать только главный CSS-файл: следует отметить, что это не самое лучшее решение, однако оно подходит в определенных случаях. В том случае, если вы работаете с большим сайтом, то главный CSS-файл позволяет избежать совсем не обязательного импорта многочисленных CSS-файлов для отдельных страниц. Вместе с тем, может привести к тому что ваш CSS-ник разрастется просто до невероятных размеров.
    2. Создавать один CSS для максимально схожих страниц: вполне приемлемый вариант по созданию одного CSS-ника для страниц с минимальным числом уникальных элементов.
    3. Создавать CSS для каждой страницы в отдельности: удобно в том случае, когда сайт не очень большой и многие его страницы имеют принципиальные отличия.

    В конечном итоге выбор одной из этих стратегий зависит от создателя сайта, от того, над сайтом какой организационной структуры он работает.

    Метод 2: CSS для отдельных элементов на странице

    Данный метод хорошо применять в тех случаях, когда на страницах присутствует код для сообщения страницы с сервером (php). Для сообщений, выводимых на странице с помощью данного кода, можно прописать собственные стили посредством соответствующего CSS-ника. Однако тут главное не перестараться: не следует прописывать CSS-ник для мелких частей на странице. Например, если для оформления футера требуется 10-20 строк в CSS, то создание отдельного файла не приведет ни к чему хорошему.


    Метод 3: CSS для отдельных страниц

    Этот прием наиболее приемлем и в чем-то схож с предыдущим. Если у нас есть сайт из 30 страниц, часть из которых имеет одинаковые формы на страницах, другая часть – одинаковые таблицы для отображения данных, то в этом случае будет удобным создать отдельные CSS-ники и для форм, и для таблиц на всех страницах.

    Небольшие подсказки по организации CSS

    Разрабатывая CSS, пользователь обязательно должен осознавать то, что информация, которую он подает должна хорошо отображаться как на обычных компьютерах, так и переносных портативных компьютерах, должна хорошо отображаться версия для печати того или иного документа. Все это обязательно нужно учитывать при организации CSS.

    Кроме того, нельзя забывать про фирменный стиль и бренд; когда начинаете работу с CSS важно заранее определить элементы на страницах сайтах, замена которых может произойти в будущем. В этом случае нужно создавать отдельные CSS-ники для таких элементов, дабы при их замене не нарушать работу других элементов страниц.

    Не следует также забывать о правиле @import., которое позволяет пользователю импортировать правила из одних таблиц стилей в другие. Что может в значительной степени снизить трудозатраты по созданию и организации файла CSS.

    Правила и селекторы

    Во-первых, следует сказать о том, что таблицы стилей состоят из набора правил, которые в свою очередь состоят из селекторов и блоков определений с их свойствами и значениями. Далее постараемся выяснить, как же организовать CSS-ник так, чтобы можно было потом в нем находить с легкостью места, которые стоит править.

    Избыточность против зависимостей между селекторами

    При работе с CSS нужно в первую очередь определиться с организацией селекторов, зависимостей между правилами. Нельзя допускать наличия селекторов с бесполезной информацией, которые просто-напросто будут перегружать код, кроме того, не следует допускать дублирования селекторов для разных элементов. Это опять же приведет к разрастанию CSS.

    Цукерберг рекомендует:  Индикатор прогресса на CSS3

    Группировать правила и селекторы стоит по тому, как они соотносятся с различными частями страниц. Если разные части страницы оформляются одинаково (header, footer), то следует правила и селекторы группировать вместе.

    Хорошим стилем написания CSS-ника считается проставление комментариев, если не каждому правилу, то хотя бы наиболее важным частям кода в файле CSS. Дополнительную полезную информацию о комментариях можно будет найти в статье “CSS Organization Tip #1: Flags”.

    Дополнительные полезные заметки

    В качестве одного из способов, который позволяет добиться исключения повторений свойств и последующего затирания этих свойств, можно применять алфавитную организацию. Данный способ позволяет очень быстро визуально отслеживать одинаковые свойства и удалять их.

    Обязательно стоит также сказать об объявлении !import , необходимом для того, чтобы документы были удобными для изучения пользователями. Объявляя !import после значений свойств, пользователь может самостоятельно задавать те свойства, которые помогут добиться того, что на экране будет картинка приятная глазу пользователя. Делается это следующим образом: в Explorer меню Tools/Internet Options/Accessibility: загрузка собственного CSS-ника.

    Вместе с тем следует сказать, что не все браузеры поддерживают стандарт CSS2, который в отличие от стандарта CSS1 позволяет пользователю создавать собственные стили для web страницы.

    Как видим, грамотная организация CSS — это далеко не простое дело, нужно многое предусмотреть, прежде чем браться за работу с этим файлом. И то, что написано выше – это лишь небольшая часть, которую нужно знать при работе с каскадными таблицами стилей.

    Гарет Даймон (Garrett Dimon)
    перевод Сергея Стружкова

    10 советов по CSS для WEB-разработчика

    Здравствуйте, уважаемые читатели XoZbloga! Спустя месяц отдыха, я приступаю к новому, так сказать сезону в работе. Постараюсь радовать Вас хорошими статьями и уроками �� Как и в любом другом деле, в веб-разработке есть свои тонкости. И чтобы достичь желаемого результата необходимо знать их. В этой статье дам 10 советов, которые могут помочь Вам при разработке стилей CSS.

    1) @media

    В спецификации CSS3 есть возможность использовать медиа-запросы. Благодаря этим запросам CSS можно оценивать некоторые технические характеристики устройств посетителя, и соответственно применять подходящие стили оформления. В приведенном выше примере могут быть описаны стили для ситуации когда окно браузера будет шириной 960 пикселей или меньше.

    2) background-size

    Еще одним чрезвычайно полезным свойством CSS3 является background-size . Благодаря этому свойству можно масштабировать фоновое изображение как угодно.

    3) @font-face

    Вы все еще пользуетесь стандартными шрифтами? Тогда мы идем к Вам! Это шутка конечно же, но действительно «грех» не воспользоваться свойством CSS @font-face и установить на своем сайте те шрифты, которые лучше всего подходят к разработанному дизайну и будут выглядет одинаково в разных браузерах и на разных устройствах. Все, что нужно — найти или создать шрифт и подцепить его к странице с помощью CSS @font-face. Также можно воспользоваться сторонними сервисами, такими как Google Web Fonts.

    Более подробно о пользовательских шрифтах — http://xozblog.ru/2012/09/font-face/

    4) margin: 0 auto

    Удивительно, что до сих пор не разработано свойств для центрирования блок элемента ( div ). Поэтому приходится прибегать к ухищрениям, вот один из лучших способов как отцентрировать div по отношению к его родителю.

    5) overflow: h >

    Бывает необходимо чтобы размеры блочного элемента оставались нетронутыми, т.е. не увеличивались под действием содержимого: будь то текст или изображение. Решается это просто свойством overflow со значением hidden. Также у этого свойства есть и другие значения, например можно сделать полосу прокрутки (значение scroll).

    6) .clearfix

    Для тех ситуаций когда overflow: hidden не работает, можно воспользоваться методом Clearfix. Название класса может быть любым, не обязательно clearfix.

    7) color: rgba()


    Используя RGBa CSS можно придать прозрачность цвету, что невозможно при использовании шестнадцатеричное значение ( #fafcdc ). Для создания цвета надо указать значения составляющих цветов: красного, зеленого и синего, а также выставить альфа параметр. 1 — полностью не прозрачный, 0 — полностью прозрачный, соответственно 0.5 — прозрачный на половину.

    8) input[type=»text»]

    При разработке дизайна грамотно применяйте css селекторы, это позволит сократить и оптимизировать код. И в целом стремитесь минимизировать количество кода, ведь это залог хорошего программирования) Благодаря селектору приведенному выше, выбираются все поля с типом text и им задается ширина 200px.

    9) transform: rotate(30deg)

    Не стоит также забывать об анимации CSS. Зачем перегружать веб-страницу лишними скриптами, когда их можно заменить css анимацией.

    Более подробно о CSS анимации и свойстве transform: http://xozblog.ru/2012/06/transform/

    Ничто не может испортить дизайн больше, чем пунктирные линии вокруг ссылки при нажатии. С помощью outline: none этого можно избежать.

    Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!

    Организация CSS-файлов: Совет 1 — Флаги

    Вам приходилось писать и работать с большими CSS-файлами? Мучались с бесконечным скроллингом вверх-вниз в поисках нужной части кода? CSS-файлы, с которыми я работаю, часто весьма велики. Постоянно приходится прокручивать несколько экранов вниз-вверх, чтобы изменить то или иное правило, или добавить новое. Работая над текущим проектом, я решил воспользоваться маленькой уловкой, благодаря которой я нахожу то, что мне нужно, практически мгновенно.

    Группируем CSS-правила

    Пару месяцев назад в предыдущей статье «CSS Organization» я слегка коснулся этой темы. В качестве примера, если вы когда-либо смотрели мои CSS-файлы, вы наверное заметили, что я всегда делю файлы на ключевые разделы. В каждом проекте, над которым я работаю, я делю весь CSS-код на следующие части:

    • Header (заголовок)
    • Structure (структура)
    • Nav (навигация)
    • Search (поиск)
    • Headings (заголовки)
    • Lists (списки)
    • Forms (формы)
    • Links (ссылки)
    • Misc (прочее)

    Когда я начал изучать CSS в 2002 году перед тем, как приступить к редизайну сайта Wired News, я разработал свою собственную систему использования комментариев и дефисов, чтобы были четко видны границы каждого раздела:

    Благодаря этому трюку мне — или клиенту, который принимает от меня работу — очень легко отыскать определенное правило, или разобраться, к какой части дизайна то или иное правило относится. Что еще более важно, этот метод организации позволяет экономить кучу времени, когда приходится править код CSS, особенно, когда приходится поправлять старые проекты, когда уже и не помнишь, что как и для чего ты там написал.

    Как их быстро отыскать?

    Так как же быстро найти правила при работе над файлом? Некоторые приложения позволяют расставлять маркеры в документе, на которые можно быстро перейти нажатием определенной комбинации клавиш. Это прекрасно, если только вы пользуетесь такой программой. Но у вас все равно возникнут затруднения с каждым новым CSS-файлом, где программные маркеры еще не расставлены.

    Еще вы можете воспользоваться функцией, которой я пользуюсь много-много лет: команда «Find» есть в любом текстовом редакторе, и она всегда позволит вам быстро найти искомый текст. Однако, если ваш CSS-файл выглядит так же, как мой, простой поиск строк «nav» или «h2» будет выдавать вам несколько мест в файле. Из-за этого вам придется жать кнопку «Find Next» до тех пор, пока редактор не найдет нужное вам место в документе.

    А бывает еще и так, что команда «Find» вообще находит совершенно не то, что вам нужно: скажем у вас есть раздел, который вы пометили сокращением «RDE»:

    Великолепно. Теперь вы четко видите, какие правила относятся к «RDE». Но стоит вам только попытаться перейти на этот раздел с помощью команды «Find», как вы сразу же обнаружите, что текстовый редактор будет натыкаться на все строки со следующим текстом:

    Простейшее решение: Флаги

    Вчера меня осенила идея. Если я поставлю небольшой флажок рядом с заголовком раздела — например символ «=», который не используется в синтаксисе имен классов ( >

    Минимум нажатий клавиш. Никакой путаницы с другими схожими строками. Символ «=» даже не надо помещать сразу перед заголовком раздела. В текущем проекте у меня несколько разделов «MISC». Так вот я помещаю флаг «=» перед самым уникальным словом в заголовке:

    Благодаря этому я быстро перехожу к разделу, где сгруппированы правила для списков. Для этого в поиске надо набрать только «=list».

    Разумеется эта хитрость работает только в том случае, если вы строго придерживаетесь правила помечать все свои большие CSS-файлы подобным образом.

    Следующий совет будет о том, как именно я разбиваю CSS-файл на разделы, и как я решаю, какие правила в какой раздел поместить, если то или иное правило подходит и для того и для другого раздела.

    7 советов по написанию удобного CSS-кода

    СSS (каскадные таблицы стилей) — это язык, который используют все разработчики в той или иной мере для того, чтобы воплощать в жизнь свои проекты, делать их красивыми и удобными для посетителя, который видит плоды их трудов на экране своего монитора.

    Но что скрывается за кулисами? Так ли красив и приятен для глаз код, который мы пишем, все ли в нем понятно и возможно ли в нем с легкостью разобраться человеку, который вдруг захочет внести в него какие-то изменения? К сожалению, многие даже не задаются подобными вопросами.

    Дело в том, что, если вы заботитесь о том, чтобы ваш CSS код было удобно читать, вы заботитесь об экономии времени в будущем, так как вы сможете намного быстрее найти необходимые вам элементы. А также, вы наверняка никогда не знаете, кто будет просматривать и редактировать ваш код после вас и было бы неплохо, чтобы тот человек вспомнил вас все-таки добрым словом.

    А теперь перейдем к делу.

    7 результативных советов по написанию удобного для чтения и редактирования CSS-кода.

    Совет 1. Выберите, как будет выглядеть ваш код и всегда придерживайтесь этого варианта..

    Те, кто пишет CSS, по виду написания кода в большинстве своем разделяются на две группы:


      Первая группа — это те, кто пишут весь код селектора в одну линию.

    Такой код более оптимизирован, весит меньше, а также занимает меньше строчек, благодаря чему он очень удобен в плане навигации по файлу стилей (не приходится прокручивать огромное полотно, чтобы найти нужный элемент кода). Но для того, чтобы быстро находить нужные свойства в таком варианте, нужно сначала научиться ориентироваться в нем.

    Вторая группа — это те, кто каждому свойству отводит свою собственную строчку.

    Такой код менее оптимизирован, файл, содержащий код такого вида, больше весит по сравнению с первым вариантом, но зато он более нагляден, здесь найти нужное свойство не составит труда. И в то же время он не так удобен в плане навигации по всему файлу стилей (приходится долго отматывать, чтобы найти нужную строчку).

    Обе эти группы правы по-своему. Просто помните о том, что вам нужно выбрать тот способ, который нравится и будет удобен именно вам. Это самое главное.

    Совет 2. Постоянство в названиях элементов.

    Выработайте в себе привычку назвать одни и те же элементы в разных файлах стилей одинаковыми именами. Это поможет вам не запутаться в коде и создаст определенный порядок в вашей голове.

    Сейчас объясню, что конкретно я имею ввиду.

    Например, каждый раз, когда я работаю с файлами стилей для разных проектов, для блоков с определенными функциями, я даю названия соответственно их предназначению (если это левый сайдбар, то я его называю sidebar-left, если это название для блока с логотипом — logo и т.д.)

    И сохраняю ту же самую «терминологию» для своих последующих работ, чтобы каждый раз не изобретать велосипед.

    Совет 3. Организуйте свой код по принципу «от верха к низу».

    Очень удобно, когда код организован «от верха к низу», то есть от шапки к подвалу. Самый удобный вариант лично для меня:

    1. Общие классы (body, a, p, h1, ul, li и т.д.)
    2. Основные блоки сайта (структура)
    3. Шапка сайта
    4. Меню
    5. Контент
    6. Сайдбар и виджеты
    7. Подвал

    Таким образом, и зрительно, и логически вам будет более удобно ориентироваться в своем файле стилей, чем при хаотичном расположении элементов.

    Совет 4. Объединяйте элементы по одинаковым свойствам.

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

    Например, для элементов, которые имеют один и тот же цвет текста и шрифт:

    А позже вы сможете добавить уже конкретные свойства для каждого из них, выписав их по отдельности.

    Совет 5. Комментируйте свой код.

    Замечательной особенностью CSS (наряду с другими языками программирования) является возможность комментировать свои записи, используя знак /* перед комментарием и знак */ после комментария:

    Такие комментарии будут служить для вас верными якорями при чтении и редактировании кода.

    Совет 6. Применяйте знание алфавита.

    Располагайте свойства для каждого элемента по алфавиту.

    Возможно, поначалу это будет занимать у вас какое-то время, но впоследствии вы привыкнете к этому, будете уже знать, что за чем идет, и уже без проблем найдете нужное свойство, если вам будет нужно его отредактировать.

    Совет 7. Будьте аккуратны.

    Еще один совет — будьте аккуратны, старайтесь, чтобы написанный вами код всегда смотрелся ровно и красиво, чтобы в нем не было лишних и непонятных отступов, или наоборот, «наездов» одного элемента на другой. Самим будет приятно и не стыдно другим показать.

    Ну вот, я поделилась некоторыми идеями с вами, которые помогают лично мне писать красивый, удобный для последующего чтения и редактирования код.

    Напоследок хочу сказать, что если вы не хотите, вам совсем не обязательно применять на деле все то, о чем я говорю.

    Просто это ценные советы, которые помогли лично мне привести в порядок мои файлы стилей и организовать мое мышление в этом плане.

    У вас может быть свой собственный стандарт написания кода, и когда вы его создадите, то непременно, вы станете более компетентным сss-мастером, с легкостью пишущим и читающим код.

    Только не забывайте, пожалуйста, и других вебмастеров, кто, возможно, будет иметь дело с тем, что вы написали, и чтобы вам не пришлось краснеть за содеянное, позаботьтесь о том, чтобы ваш CSS-код был удобным для чтения и редактирования.

    Понравилась статья? Поделиться с друзьями:
    Все языки программирования для начинающих