7 полезных советов по написанию хорошего кода CSS


Оглавление (нажмите, чтобы открыть):

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. Спасибо!

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-код был удобным для чтения и редактирования.

Простой CSS

Несколько советов по написанию CSS

Хороший код, это не тот, который удобно писать, а тот, который удобно читать и поддерживать.

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

Хороший код — это аккуратный код, в котором всё сделано единообразно: везде используется один и тот же порядок свойств, отступы и пробелы, стиль записи цветов и псевдоэлементов.

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

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

10 советов по CSS, которые позволят оптимизировать вашу таблицу стилей

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

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

1. Оставайтесь организованным от А до Я

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

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

    Сброс и оверрайды / Reset & Overr >

2. Название, Дата и Подпись

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

Подождите … что такое SwatchColors? Ничто иное как палитра цветов вебсайта. За эти годы я обнаружил, что добавление простого списка наиболее распространенных и используемых цветов на сайте в CSS является чрезвычайно полезным во время начального развития и при принятии изменений в дальнейшем. Это избавит вас от необходимости открывать Photoshop и пробовать цвета с дизайном, или посмотреть цвета в стиле руководства сайта (если оно есть). Когда вам нужен HTML код для конкретного цвета, просто прокрутите вверх CSS листа, и скопируйте нужный.

3. Храните все свои темплейты в одном месте и используйте их как основы для новых проектов

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

Вы можете сохранить несколько версий для различных применений: две колонки, блог, верстка, печать, мобильные и так далее. Coda (редактор для OSX) имеет отличную функцию, Clips, которая позволяет легко это сделать. При использовании типичной структуры сайта, идентификаторов и тд, писать новый CSS будет просто безумством, если вы можете использовать уже готовую структуру.

4. Называйте классы своими именами

К примеру, если у меня есть два класса .col-alpha & .col-beta, почему бы их не переименовать в .col-left & .col-right, что является более логичным и позволит проще ориентироваться в коде при дальнейших правках. Думайте о будущем всегда! В следующем году вам, возможно, придется перестроить свой сайт и поменять левую колонку на правую. Если идентификатор говорит левая колонка, следует ожидать, что она всегда будет с левой стороны. Это не оставит вам много места для маневров в дальнейшем.

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

5. Дефисы вместо подчеркиваний

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

6. Не повторяться

Группируйте элементы, если это возможно, вместо повторения их. Если ваш h1 и h2 элементы используют один и тот же шрифт, размер, цвет и поля, то группируйте их с помощью запятой. Также используйте шорткоды. Вместо border-top:5px; border-right:5px; border-bottom:5px;border:-left:5px; можно легко использовать сокращение в виде border:5px;

Порядок, в котором CSS понимает ваши параметры идет по кругу: сверху, справа, снизу, слева. Большой круг по часовой стрелке, начиная с полудня. Кроме того, если верхний и нижний, или левый и правый атрибуты те же, вам нужно всего лишь использовать два: border:5px 10px; У нас получится граница сверху/снизу по 5px, и по 10 пикселей справа и слева.

7. Оптимизируйте код

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

Еще один совет для уменьшения обьема файла: вам не нужно указывать единицу измерения при использовании нуля. Если у вас 0px или 0em, можно просто указать 0, CSS это распознает сам.

8. Написать основу для нормальных браузеров, а затем настроить для Webkit и IE

Вначале напишите оптимизированый код для Firefox, Mozilla. Если ваш CSS правильно работает с ними, то будет меньше проблем в Webkit (Safari, Chrome) и Internet Explorer.

9. Валидируйте код!

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

10. Придерживайтесь чистоты в доме

Отдельные браузеры используют свои конкретные CSS стили, и по мере необходимости, включают JavaScript код на стороне сервера. Не стоит засорять ваш основной CSS. Вынесите все хаки в отдельный stylesheet. Такая оргнизицая стилей, поможет вам в дальнейшем избежать конфликтов и неразберихи в ваших таблицах стилей!

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

10 мест, где можно быстро поделиться фрагментами кода

Интегрированная среда разработки (IDE) — это довольно мощный инструмент в виде онлайн-приложения для быстрого создания и совместного использования фрагментов кода посредством обычного, интуитивно понятного и удобного интерфейса. Последние приложения предлагают живой предварительный просмотр и отдельные окна для CSS, HTML и JS, а также включают в себя большое количество полезных инструментов, таких как предустановленные библиотеки JavaScript, поддержка препроцессоров языков, генератор кода, инструменты для совместной работы и другое.

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

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

Codepad является новой платформой, которая хорошо подходит для разработчиков различных сфер. Если вы специализируетесь в ActionScript или C-Sharp, сервис отлично подойдет вам со своей удобной средой для написания, тестирования, сохранения и обмена фрагментами кода в режиме онлайн.

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

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

Эта площадка является одной из любимых среди разработчиков, приютившая тысячи восторженных кодеров и их изобретения. Чтобы пользоваться дополнительными преимуществами, например, частным обменом, вы должны зарегистрироваться, однако если вам нужно быстро создать фрагмент кода, вы можете просто нажать кнопку “New Pen” и приступить к работе.

Это не только отличный инструмент для прототипирования рабочих компонентов или элементов пользовательского интерфейса с помощью HTML, CSS или JavaScript, но это также отличная онлайн-галерея, где вы можете найти шпаргалки и решение ваших проблем. Помимо жизненно важных функции, инструмент готов к работе с такими препроцессорами как SASS, LESS, Stylus, SCSS, CoffeeScript и LiveScript.

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

С более чем 40 000 зарегистрированных пользователей, CSSDeck является ведущей платформой для написания и обмена исходным кодом. Хотя название площадки и говорит о том, что она концентрируется на CSS, тут вы можете создавать концепции сосредоточенные на HTML и JavaScript. Вам не нужно иметь учетную запись, чтобы приступить к делу. Тем не менее, если вы хотите получить все преимущества, то лучше создать аккаунт, что является совершенно бесплатным.

Codeshare еще один фронтенд редактор, не требующий регистрации, предлагающий разработчикам удобную площадку с интуитивно понятным интерфейсом и небольшим набором полезных инструментов. Просто напишите или вставьте код, поделитесь ссылкой с коллегами, обсудите и решите проблему сообща. Кроме того, инструмент имеет видео-чат, работающий по технологии WebRTC, для совместной работы в реальном времени. Единственным недостатком является то, что проект исчезнет с сервера через 14 дней.

jsFiddle будучи одним из первых в этой области, уже давно высек нишу для себя. Тут нет приветственной страницы, которая подчеркивает особенности площадки или показывает работы других, однако сервис делает то, что надо делать – обеспечивает кодера смарт-доской, чтобы смешивать и сочетать различные технические приемы для достижения желаемого результата. Сайт разбит на четыре раздела, где можно писать в HTML, CSS и JavaScript, а также увидеть эффект в режиме реального времени. Площадка имеет несколько особенностей, таких как:

  • Поддержка TypeScript
  • Авто-сохранение локальных черновиков
  • Библиотеки JavaScript
  • Инструменты совместной работы для команд
  • Интуитивно понятный и эффективный способ генерировать код для вставки

С сильной поддержкой таких известных инструментов, как Bootstrap, Foundation, Materialize, SemanticUI, Skeleton и другие, Codeply является отличным местом для изготовления отзывчивого дизайна, виджетов и комплектующих для этих фреймворков. Вы можете использовать готовые макеты, фрагменты и элементы прямо из редактора, чтобы улучшить свои проекты. Также имеется онлайн-галерея с работами участников.

Dabblet — это великолепный инструмент, когда дело доходит до разбивания задачи на отдельные части и индивидуальной визуализации результатов. Есть пять различных типов предварительного просмотра – «CSS и результат», «HTML и результат», «CSS, HTML и результат», «JS и результат» и все вместе. Они улучшают рабочий процесс с разных точек зрения. К сожалению, список возможностей, не столь впечатляющий, как на сайте Сodepen. Однако, вы можете исправить это путем добавления вручную всех требуемых библиотек.

LiveWeave предлагает девелоперам:

  • Кучу библиотек, которые обновляются регулярно, начиная от AngularJS и заканчивая Zepto,
  • Генератор для подставного текста, находящийся под рукой
  • Инструменты экспорта
  • Генератор CSS3 кода
  • Лаборатория цвета и палитры
  • Инструменты для совместной работы


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

Pastie – это примитивный инструмент, который является альтернативой основным инструментам обмена. Если нужно быстро написать код и поделиться им с другими, вы можете избежать всей суеты, присущей огромным и мощным редакторам, и просто приступить к делу.

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

Заключение

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

7 важных советов, как писать лучший CSS

Перевод статьи «7 Important Tips for Writing Better CSS».

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

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

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

1. DRY

Название принципа DRY это аббревиатура слов «Don’t Repeat Yourself» («не повторяйся»). Это общий принцип разработки ПО, применимый к любым языкам программирования, а также и к CSS. Как следует из названия, принцип DRY призывает нас по возможности уменьшать количество повторов в коде.

Например, мы можем написать три разных CSS-класса для трех кнопок:

Или можно применить принцип DRY и единожды написать общие правила в дополнительном классе, а в классах конкретных кнопок останутся только специфические для этих кнопок правила:

Как мы видим, применение принципа DRY способствует отсутствию повторов, снижению количества строк, улучшению читаемости и даже производительности кода.

2. Нейминг

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

это HTML-тег, обозначающий абзац. В приведенном выше коде мы не можем сходу понять, что представляет из себя класс p. Также следует избегать имен вроде myFirstForm, поскольку использование camel case не поощряется.

Вместо этого используйте описательные имена (если они состоят из нескольких слов, разделяйте эти слова дефисами):

Теперь эти имена гораздо понятнее!

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

3. Не используйте встроенные стили

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

Разделение ответственности

Согласно принципу разделения ответственности, дизайн (CSS), контент (HTML) и логика (JavaScript) должны быть разделены. Делается это, в частности, для улучшения читаемости и поддерживаемости кода.

Включение CSS-правил в HTML-теги нарушает это правило:

Правила стиля должны храниться во внешних CSS-файлах.

Сложности поиска

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

Например, давайте изменим font-size текста нашей веб-страницы. Для этого нам сначала нужно просмотреть HTML-структуру, чтобы найти ту часть, где требуются изменения:

Затем нам нужно найти селектор, здесь — класс text-bold. Наконец, мы отправляемся к этому классу и вносим изменения:

Но что если правила прописаны внутри тега, без использования классов?

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

Не проще ли использовать селектор CSS? А есть ведь вещи и похуже…

Специфичность (проблемы с перезаписыванием)

Встроенные стили обладают самой высокой специфичностью (если не считать тегов !important).

Допустим, мы используем для элемента и класс, и встроенный стиль:

Таким образом, font-size текста будет 14px, потому что встроенные стили имеют более высокую специфичность, чем CSS-классы. Вы вносите изменение в класс:

А размер шрифта все равно остается равным 14px. Изменение CSS-класса ни к чему не приводит, и вы восклицаете: «Эй, а почему это мой CSS-код не работает? Ненавижу CSS!». Это приводит вас к использованию !important, который творит чудеса:

А это табу, и о нем мы поговорим в следующем разделе.

4. Избегайте !important

Окей, ваш CSS не сработал, хотя должен был, и вы заставили его работать, применив !important.

Что происходит дальше? !important имеет самую высокую специфичность среди всех CSS-селекторов.

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

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

5. Используйте препроцессор

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

Например, мы можем определять переменные, функции и миксины, можем испортировать и экспортировать наши CSS-файлы в другие CSS-файлы, а также писать вложенный CSS-код:

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

Мне нравится работать с Sass, я его применял во многих проектах. О преимуществах использования препроцессоров я писал отдельно.

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

Некоторые CSS-свойства, такие как padding, margin, font и border можно описывать гораздо проще, применяя сокращенный вариант записи. Также это помогает уменьшить количество строк в правилах.

При полном варианте записи CSS-класс выглядит так:

а при сокращенном — так:

О том, как использовать сокращенную запись свойств и для каких свойств это применимо, можно почитать здесь.

7. При необходимости добавляйте комментарии

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

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

Принципы написания чистого CSS кода

Слишком часто крупные (да и мелкие) сайты страдают от слишком разросшегося, и по сути, избыточного CSS кода, где можно найти большое количество лишних элементов, слишком длинные и конкретизированные выражения, большую зависимость одних селекторов от других, частое и нецелесообразное использование !important и так далее. Для оптимизации наших таблиц стилей, мы конечно же можем воспользоваться какими-то базовыми основами написания CSS кода. Что мы действительно должны делать, так это добиваться хорошего структурирования таблиц стилей и стремиться к повышению устойчивости к высоким нагрузкам.

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

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

Несколько полезных методов

Частенько чей-то чужой опыт бывает очень полезным. Давайте рассмотрим несколько примеров:

Быстрый доступ к элементам

Очень важно иметь возможность получать быстрый доступ к какому-то стилю прямо со страницы. Для этого можно воспользоваться различными инструментами, такими как Explorer Developer Toolbar, Mozilla Firebug или Chrome Developer Tools. Используя данные инструменты, мы можем быстро находить то, что нам нужно, и тут же менять, видя результат.

В данном фрагменте присутствует свойство outline. Оно используется для одновременного присвоения цвета, стиля и толщины внешней границы на всех четырех сторонах элемента. Тут я выбрал слово red для определения цвета границы и заметьте, не просто так. Для определения конечных цветов всегда пользуйтесь rgb или hsl кодами, а для временных — цельными словами. Это поможет вам в будущем быстро найти нужные фрагменты и устранить спорные моменты, возникшие во время разработки. Будьте осторожны с использованием свойства outline, т.к. оно не работает в Internet Explorer 8.

Добавление тестовых стилей

Ещё одной хорошей практикой является добавление отступа для каких-то тестовых или временных свойств.

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

Отключение стилей

Часто при написании CSS кода нам нужно отключать какие-то стили. Мало кто знает, но для этого можно к свойству приписать префикс “x-”:

Этот способ быстрее, чем комментирование. Также это может упростить поиск таких спорных селекторов.

Очистка и оптимизация CSS кода

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

Макро-оптимизация

Прежде чем приступить к оптимизации таблиц стилей, нам нужно написать хорошо читабельный HTML и CSS код.

Формирование информации и определение структуры таблицы стилей

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

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

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

Знак “=” в последнем выражении используется исключительно для упрощения поиска отдельно взятой секции.

Аннотации и отображение вложенность

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

Аннотации формируются с помощью следующих выражений: или просто .

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

Разницу между хорошо и плохо структурированным кодом, вы можете увидеть в следующих примерах.

До

После

Микро-оптимизация

Микро-оптимизация направлена на уменьшение размера файла и увеличение скорости загрузки страницы.

Сортирование свойств в алфавитном порядке

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

Пример 1

Пример 2

Увеличение эффективности кода

Длинные селекторы заставляют браузер лишний раз проходиться по DOM-у и искать совпадения. Более конкретизированные названия селекторов позволяют избежать данную проблему.

Перед оптимизацией

После оптимизации

Пишите просто и кратко

Чем меньше написано кода, тем эффективнее работает страница. Для определения стилей следуйте следующим правилам.

  1. Используйте короткие названия CSS свойств везде, где это возможно;
  2. Пишите сокращённые значения свойств;
  3. Избегайте дублирования CSS свойств.

До

После

Сокращайте код

Главное, что вам нужно сделать на финальной стадии работы над стилями, — это убрать все дубликаты строк и различного рода отступы. Для рабочей версии стиля можно также убрать всевозможные комментарии. Также можно воспользоваться инструментами сжатия CSS стилей: CSS Compressor, CSS Drive.

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.sitepoint.com/css-architectures-principles-of-code-cleanup-2/
Перевел: Станислав Протасевич
Урок создан: 25 Марта 2013
Просмотров: 39115
Правила перепечатки

5 последних уроков рубрики «CSS»

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Раскрывающаяся навигация

Экспериментальный скрипт раскрывающейся навигации.

Написание хорошего кода

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

Более точно, этот урок посвящён передовой практики написания кода на HTML и CSS. Описанные методы служат в качестве общего каркаса для написания HTML и CSS. Они применяются в каждом уроке и о них всегда следует помнить при программировании.

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


Методы написания HTML

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

Разметка по стандартам

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

Следующий код содержит несколько ошибок, в том числе использует значение intro для атрибута >

и закрываются в неправильном порядке в первом абзаце, а элемент во втором абзаце не закрывается вообще.

Использование семантических элементов

Библиотека элементов в HTML является довольно большой, состоит более чем из 100 элементов, доступных для применения. Решить, какие элементы использовать для описания разного содержимого, может быть сложно, но эти элементы являются основой семантики. Мы должны исследовать и перепроверить свой код и убедиться что используем соответствующие семантические элементы. Люди будут благодарить нас в долгосрочной перспективе за создание более доступного сайта, а ваш HTML будет несравненно легче стилизовать. Если вы не уверены в своём коде, найдите друга, который вам поможет и выполнит рутинный обзор кода.

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

Используйте правильную структуру документа

Как упоминалось ранее, HTML является прощающим языком, следовательно, страницы будут отображаться без использования доктайп или элементов , и . Без доктайпа и этих структурных элементов, страницы не будут отображаться правильно в любом браузере.

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

Сохраняйте синтаксис организованным

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

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

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

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

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

Ниже в HTML предполагается, что предупреждение будет красным. Однако, когда стиль предупреждения изменится на оранжевый, имя класса red потеряет смысл и, скорее всего, приведёт к путанице.

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

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

Значение атрибута alt должно описывать, что содержит изображение. Если изображение не содержит ничего актуального, атрибут alt по прежнему должен быть включён, но при этом его значение должно быть пустым, чтобы экранные ридеры его игнорировали, а не читали имя графического файла.

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

Отделяйте содержимое от стиля

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

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

Избегайте лишних

При написании HTML легко увлечься, добавив элемент

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

Постоянно реорганизуйте код

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

Методы написания CSS

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

Организация кода через комментарии

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

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

Пишите CSS с помощью нескольких строк и пробелов

При написании CSS важно поместить каждый селектор и описание правил на новой строке. Затем внутри каждого селектора мы хотим сделать отступ описаний.

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

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

Комментарии и пробелы

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

Используйте подходящие имена классов

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

Выстраиваете правильные селекторы

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

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

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

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

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

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

Например, если элемент вложен в

внутри элемента и всё это вложено в элемент , то селектор может выглядеть как aside h1 em . Как только элемент перемещается из

, стили больше не будут применяться. Более гибким селектором будет использование класса, такого как text-offset , для элемента .

Используйте сокращённые свойства и значения

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

При этом, когда вам требуется установить одно значение, не следует применять сокращённый вариант. Если для блока нужен только нижний margin , используйте одно свойство margin-bottom . Это гарантирует, что другие значения margin не будут перезаписаны и мы можем легко определить, к какой стороне применяется margin без особых когнитивных усилий.

Используйте сокращённые шестнадцатеричные значения цвета

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

Отбросьте единицы у нулевых значений

Один из способов для простого сокращения количества CSS при написании — это удаление единиц у нулевых значений. Независимо от того, какая единица длины применяется — пиксели, проценты, em и др. — ноль всегда ноль. Добавление единицы не нужно и не несёт никакой дополнительной ценности.

Группирование и выравнивание вендорных префиксов

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

В зависимости от того, где расположен вендорный префикс — в свойстве или в значении, выравнивание может изменяться. Например, следующий хороший код сохраняет свойства background выровненными влево, в то время как функции linear-gradient() с префиксами сдвинуты так, чтобы их значения подгонялись по вертикали. Затем свойства box-sizing с префиксами сдвинуты так, чтобы все они подгонялись по вертикали.

Как всегда, цель — сделать стили проще для чтения и редактирования.

Вендорные префиксы

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

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

Модульность стилей для повторного использования

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

Если раздел новостей представлен в блоке, который включает границы, цвет фона и другие стили, класс news может показаться хорошим вариантом. Однако, те же самые стили могут также применяться к разделу предстоящих событий. Класс news не подходит в данном случае. Класс feat-box имел бы больше смысла и может быть широко использован по всему сайту.

Резюме

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

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

Чтобы выделить некоторые главные темы этого урока, наши HTML и CSS всегда должны:

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

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

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

Ресурсы и ссылки

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

7 полезных ресурсов для тех, кто изучает CSS

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

Консорциум Всемирной паутины (World Wide Web Consortium, W3C) рекомендовал технологию CSS (Cascading Style Sheets) в 1996 году. С тех пор веб-разработчики используют каскадные таблицы стилей для создания уникального оформления сайтов.

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

Установите расширение Web Developer для Chrome или дополнение Disable CSS для Firefox, чтобы полюбоваться любимыми сайтами без каскадных таблиц стилей.

Изменения будут разительными, хотя и не всегда. Например, новостной агрегатор Drudge Report почти не изменится: он прост как дважды два. Тем не менее ежемесячно ресурс просматривают свыше 150 миллионов раз.

Где научиться тонкостям CSS

1. HTMLbook

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

На HTMLbook вы найдёте понятный самоучитель и ответы на популярные вопросы о каскадных таблицах стилей. Здесь же представлены обучающие статьи об актуальной третьей спецификации CSS.

2. WebReference

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

3. CSS Reference

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

4. CSS Design Awards

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

5. CSS Zen Garden

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

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

6. CSSPlay

Понятное дело, что вам захочется применить нечто эдакое, что привлечёт всеобщее внимание. Не знаем, есть ли такое на CSSPlay, но десятки и сотни любопытных приёмов там точно завалялись.

Скачать код напрямую не получится. Вам придётся залезть в меню разработчиков — такова политика местной партии. При этом подавляющее большинство CSS-стилей можно использовать без разрешения автора.

7. CSS Lint

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

А какие ресурсы о каскадных таблицах стилей можете посоветовать вы?

7 полезных советов по написанию хорошего кода CSS

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

  • Оцените публикацию
    Сайтостроение от А до Я
  • Настрочить жалобу в спортлотоsmartZone
  • Распечатать

Похожие публикации

Всплывающие уведомления в стиле Facebook с помощью CSS и Jquery

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

Прописать css стили для доп полей

Может кто подскажет как прописать css стили для доп полей регистрации, формы и добовления новостей.

Создание CSS-анимации при помощи Move.js

В нашей статье мы дадим обзор основ Move.js и приведём примеры кода, показывающего эту библиотеку в действии Рубрика: CSS

Разрабатываем различные стили эффектов при наведении при помощи чистого кода CSS3

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

Страйпы в CSS

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

CSS-градиенты

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

Мастер Йода рекомендует:  5 вещей, которые вы не знали о типах позиционирования CSS
Добавить комментарий