Html — Как НЕ писать HTMLCSS овно-код


Содержание

Html — Как НЕ писать HTML/CSS овно-код?

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

Бесплатные уроки CSS для начинающих

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

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

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

12 Полезных CSS-кодов для WEB-Разработчиков

Согласно Wikipedia, Cascading Style Sheets (CSS) — это язык таблицы стилей, используемый для описания внешнего вида и форматирования документов, написанных на языках разметки. Как наиболее часто используемый для стиля, веб-страниц и интерфейсов, написанных на HTML и XHTML, язык может быть применен к любому виду XML-документа, включая обычный XML, SVG и XUL.

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

Центрирование изображения по вертикали и горизонтали в контейнере

200?’200px’:»+(this.scrollHeight+5)+’px’);»>html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video <
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
>

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section <
display: block;
>
body <
line-height: 1;
>
ol, ul <
list-style: none;
>
blockquote, q <
quotes: none;
>
blockquote:before, blockquote:after,
q:before, q:after <
content: »;
content: none;
>
table <
border-collapse: collapse;
border-spacing: 0;
>

200?’200px’:»+(this.scrollHeight+5)+’px’);»>ul li <
color: black;
list-style-type: none;
>

ul li:before <
color: red;
float: left;
margin: 0 0 0 -0.89em;
font-size: 2em;
content: ‘\2022’;
>

200?’200px’:»+(this.scrollHeight+5)+’px’);»>@charset «UTF-8»;
/*
User Submitted Posts — CSS Stylesheet

Notes: complete list of CSS hooks for the submission form @ http://m0n.co/e
This is a complete CSS skeleton of all elements and hooks in the submission form.
Use what you need and then delete any empties to lighten the file.
*/
div#user-submitted-posts <>
div#user-submitted-posts form <>
div#user-submitted-posts fieldset <>
div#user-submitted-posts fieldset label <>
div#user-submitted-posts fieldset input <> /* excludes submit button */

div#user-submitted-posts input <>
div#user-submitted-posts label <>
div#user-submitted-posts textarea <>
div#user-submitted-posts select <>
div#user-submitted-posts option <>

fieldset.usp-name <>
fieldset.usp-url <>
fieldset.usp-title <>
fieldset.usp-tags <>
fieldset.usp-category <>
fieldset.usp-content <>

fieldset.usp-captcha <>
div#user-submitted-posts fieldset.usp-captcha input <>

fieldset.usp-images <>
fieldset.usp-images label <>
div#user-submitted-posts input.usp-clone <>

div#usp-upload-message <>
div#user-submitted-image <>
a#usp_add-another <>

div.usp-input-error <>
div.usp-input-error span <>

200?’200px’:»+(this.scrollHeight+5)+’px’);»>/*****
SCSS CSS 3 Property Maxin v 0.1
by Dele O
*******/

@mixin rounded($radius: 10px) <
border-radius: $radius;
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
>

@mixin roundedSides($topLeft, $topRight, $bottomRight, $bottomLeft) <
-moz-border-radius-topleft: $topLeft;
-moz-border-radius-topright: $topRight;
-moz-border-radius-bottomright: $bottomRight;
-moz-border-radius-bottomleft: $bottomLeft;
border-top-left-radius:$topLeft;
border-top-right-radius: $topRight;
border-bottom-right-radius: $bottomRight;
border-bottom-left-radius: $bottomLeft;
>

@mixin shadow( $off-y, $off-x, $blur, $color) <
-moz-box-shadow: $off-y $off-x $blur $color; /* FF3.5+ */
-webkit-box-shadow: $off-y $off-x $blur $color; /* Saf3.0+, Chrome */
box-shadow: $off-y $off-x $blur $color; /* Opera 10.5, IE9 */
>

@mixin gradient($baseColor, $toColor) <
background-color:$baseColor;
background-image: -moz-linear-gradient(top, $baseColor, $toColor); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, $baseColor),color-stop(1, $toColor)); /* Saf4+, Chrome */
background-image: linear-gradient(top,$baseColor, $toColor);
filter: prog );
>

@mixin trasition($property, $duration:0.3s, $function: ease-out) <
-moz-transition: $property $durations $function; /* FF3.7+ */
-o-transition: $property $durations $function; /* Opera 10.5 */
-webkit-transition: $property $durations $function; /* Saf3.2+, Chrome */
transition: $property $durations $function;
>

@mixin transform($scale, $rotate, $trans-x, $trans-y, $skew-x, $skew-y) <
-moz-transform: scale($scale) rotate($rotate) translate($trans-x, $trans-y) skew(skew-x, skew-y);
-webkit-transform: scale($scale) rotate($rotate) translate($trans-x, $trans-y) skew(skew-x, skew-y);
-o-transform: scale($scale) rotate($rotate) translate($trans-x, $trans-y) skew(skew-x, skew-y);
-ms-transform: scale($scale) rotate($rotate) translate($trans-x, $trans-y) skew(skew-x, skew-y);
transform: scale($scale) rotate($rotate) translate($trans-x, $trans-y) skew(skew-x, skew-y);
>

Html + Css написать html код

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

Понятно, что вначале должно быть как-то так:

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

2 ответа 2

Не забывайте закрывать теги. a:hover + span — означает следующий span после элемента a при наведенном на него курсоре.

Один из вариантов как это может выглядеть, без лишних элементов.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html jquery css или задайте свой вопрос.

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2020 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2020.11.13.35431

Frontender Magazine

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

Препроцессоры CSS

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

Конкатенация

Наиболее ценной возможностью препроцессоров я считаю конкатенацию файлов. Уверен, вы знаете что написав @import в файле .css вы собственно говорите браузеру: «используй и этот файл, пожалуйста». И он его использует. Добавляется еще один запрос, что не очень хорошо, ведь таких файлов у вас может быть много. Большое количество запросов ухудшает производительность приложения. Если использовать препроцессоры CSS, эта проблема устраняется. Они просто объединяют все стили в один css-файл.

Расширение

Есть два основных препроцессора CSS — LESS и Sass. Они оба поддерживают расширение CSS. Да, работают они немного по-разному, но идея та же. Вы создаете базовый класс (его обычно называют «миксин») с набором свойств и затем импортируете эти свойства в другой селектор. Например:

Здесь есть нюанс: если вы прописываете миксин без аргумента, т.е. если у вас есть только

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

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

Очевидны два позитивных момента. Во-первых, класс .bordered не компилируется. Во-вторых, Sass комбинирует селекторы, что делает CSS немного короче.

Компоновка

LESS и Sass поддерживают определение переменных. Можно в любой момент обратиться к этим переменным и использовать их в качестве значений для свойств.

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

Также удобно использовать переменные, когда нужно сделать вставку. Это продемонстрировано в следующем примере:

Аргументы против препроцессоров

  • Препроцессор является инструментом, т.е. это еще один компонент, который вам придётся добавить в среду разработки. Вам возможно захочется сделать его встроенным в приложение. Это, само собой, предусматривает написание дополнительного кода.
  • Если вы не хотите беспорядка в коде, вам вероятно понадобится средство отслеживания изменений. Еще один инструмент, который будет следить за вашими файлами и запускать компиляцию после того как в них будут внесены изменения. Если это ваш случай, вам придётся запускать этот инструмент каждый раз когда вы начинаете работать над проектом. Возможно, со временем вы найдете способ оптимизировать этот процесс, но над этим придётся поработать.
  • Очень часто разработчиков заботят только файлы .less или .Sass. Однако, результат — вот, что действительно имеет значение. Ваш Sass может быть изящным и оптимизированным, однако это не гарантирует, что в результате вы получите столь же красивый CSS. Могут возникнуть довольно интересные проблемы со специфичностью. Так что скомпилированную версию нужно регулярно просматривать.

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

Стили могут быть такими:

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

Однако это не очень хорошая идея, ведь стили становятся зависимыми от иерархии конкретных тегов. Что если потребуется перенести логотип за пределы тега header ? Стиль не будет применён. Можно добавить site-header в название класса логотипа:

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

потому что по логике название селектора должно отвечать расположению тегов в HTML.

БЭМ может стать решением в таком случае. Он расшифровывается как «Блок, Элемент, Модификатор» и диктует некоторые правила, которым нужно следовать. Используя БЭМ можно превратить наш маленький пример в:

Т.е. site-header — это у нас блок. Логотип logo и навигация navigation — элементы этого блока, а версия логотипа xmas — модификатор. Возможно всё и выглядит очень просто, но такой подход даёт широкие возможности. Начав его использовать, вы убедитесь что архитектура ваших работ улучшится. Слабой стороной БЭМ является разве что синтаксис. Да, он немного безобразен, но я готов пойти на жертвы ради исправности системы.

Цукерберг рекомендует:  Библиотеки - Что вы считаете лучшими библиотеками для Python

(материалы для чтения: здесь и здесь)

OOCSS

Открыв для себя БЭМ, я научился правильно называть классы и задумался над структурой. Наверное первой мне на глаза попалась статья об Объектно-ориентированном CSS. Суть объектно-ориентированного программирования частично заключается в использовании абстракций и язык CSS их поддерживает. Не важно используете вы препроцессоры или нет, вам нужно знать об OOCSS. Я программист, поэтому эта концепция показалась мне очень похожей на то, как я программирую каждый день, например, на JavaScript. У неё есть два главных принципа:

Разделение структуры и оформления

Взгляните на следующий пример:

В нём несколько стилей продублированы. Их можно выделить в отдельный класс следующим образом:

Теперь у нас есть объект colors-skin , которому можно найти широкое применение. Разметка может выглядеть так:

У такого изменения есть несколько плюсов:

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

Разделение контейнера и содержимого

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

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

Фреймворк

Если вы откроете репозиторий OOCSS на GitHub, то увидите фреймворк. Да, в этом фреймворке используется концепция объектно-ориентированного CSS и да, у него есть несколько крутых компонентов, готовых к использованию. С некоторого времени мне не нравятся фреймворки. Если вы на минуту задумаетесь, то увидите что слово фреймворк состоит из двух частей — «frame» и «work», что значит «каркас, рамка»1 и «изделие». И действительно, работая с фреймворком вы ограничены рамками. Вы связались с этим инструментом и вынуждены играть по его правилам. Я отдаю предпочтение микро-фреймворкам или подобным инструментам, которые дают мне лишь основу. Я ни в коем случае не пытаюсь изобрести колесо, только хочу найти баланс. Очень часто готовые к использованию решения ведут к неопрятной и слишком запутанной системе. Я бы советовал создавать такие инструменты с одной конкретной целью. Если пытаться предвидеть побольше способов применения, в результате получите… ну, вы поняли — фреймворк.

Тем не менее я настоятельно рекомендую взглянуть на фреймворк OOCSS. Возможно он подойдёт под ваши требования. Создатель репозитория — Николь Саливан (Nicole Sullivan). Она первооткрыватель OOCSS и если у вас появится немного свободного времени, советую послушать её презентации/лекции.

SMACSS

Представляю вам ещё одну популярную концепцию: SMACSS. SMACSS расшифровывается, как масштабируемая модульная архитектура CSS (Scalable and Modular Architecture for CSS). Джонатан Снук (Jonathan Snook) предложил нечто вроде гида по стилю для CSS-разработчиков. Суть в том, чтобы разделить ваше приложение на следующие категории:

  • основа — базовые стили по умолчанию для простых селекторов. Например, clearfix ;
  • структура — определение каркаса;
  • модуль — группа элементов которые вместе формируют модуль. Например, шапка или боковая колонка;
  • состояние — содержит описание различных состояний элементов. Правила при скрытии, нажатии, растяжении (и т.д.) определённого объекта;
  • тема — большей мерой определение визуального представления элементов. Похожая на категорию «состояние»;

Мне пока не приходилось использовать концепцию SMACSS, но она довольно популярна и действительно продвигает хорошие идеи. Больше всего радует, что она скорее является идеей реализации, чем фреймворком. Следовательно, вы не связаны чёткими правилами, классами или компонентами.

Атомарный дизайн

Изучив OOCSS и SMACSS, я начал искать подходящее модельное представление и довольно быстро оказался на этой странице. Это презентация отличной концепции «Атомный дизайн». Её автор — Бред Фрост (Brad Frost), известный веб-разработчик, работающий преимущественно в мире отзывчивого дизайна и дизайна для мобильных устройств.

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

Т.е. атомы содержат базовые стили элементов DOM. Например, цветовую палитру, размеры шрифтов или переходы. Затем эти частички можно объединить в молекулы. Например:

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

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

Еще одна особенность концепции — заготовки. Они не имеют ничего общего с химией, однако вписываются в веб-контекст. Сочетая разные организмы, мы создаём заготовку. Затем из этих заготовок формируется конечная страница.

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

Органический CSS

Пару месяцев назад я написал статью об Organic. Это чудесный маленький фреймворк для приложений на JavaScript. Он даже больше смахивает на шаблон разработки и лично мне он очень понравился. Я даже использовал Organic в нескольких проектах и всё работает без каких-либо проблем. Если он вас заинтересовал, советую почитать этот пост.

Когда я натолкнулся на статью Бреда Фроста, мне уже была знакома похожая концепция, реализованная в Organic. Работа Бреда просто великолепна, однако я решил пойти дальше и написать собственный микро-фреймворк на основе концепции атомного дизайна. Я использовал Sass в качестве препроцессора и создал репозиторий на Github — https://github.com/krasimir/organic-css.

Атомы

Начнём с наименьшего компонента фреймворка — атома. Согласно определению из википедии, атом является наименьшей частицей вещества. В контексте CSS, думаю этому определению соответствует свойство и его значение. Например:

Добавление атомов посредством прописания стилей прямо в классах не соответствует моим намерениям. Потому что если я напишу что-то вроде этого:

препроцессор оставит эту запись как есть. А мне нужен вот такой результат:

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

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

Для большей последовательности работы я создал миксин для определения атома. Итак, вот пример:

Используя этот подход я создал подборку атомов, которые можно с легкостью применить для любого проекта. Взглянуть на них можно здесь. Я использовал некоторые хорошие правила из других фреймворков, не всё является моей заслугой. Также доступен миксин для объединения атомов в молекулу:

Молекулы

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

Ко мне пришла одна интересная мысль. Рассмотрим тег body . Что это? Молекула или что-то другое? Он, без сомнения, нуждается в стилизации посредством атомов, но в общем содержит другие молекулы. Значит он должно быть не молекула, а что-то другое. Я пришёл к заключению, что CSS должен быть на первом месте. Т.е. если для стилизации body нужны несколько атомов, значит он является молекулой, что значит что теоретически я не должен присоединять к нему никаких других молекул. Это может показаться непрактичным, но в большинстве случаев поможет вам воздержаться от использования дочерних селекторов, что хорошо.

Органеллы

Как только вы разберётесь с тем какие элементы DOM являются молекулами, вы поймёте что такое органеллы. Например, обычный элемент form служит прекрасным примером органеллы. Он содержит молекулы label , input и textarea .

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

Больше абстракций

Очень часто у вас может вознкать желание объединить органеллы ещё во что-то. В таком случае добавим ещё абстракций.

Только от вас зависит, как вы построите свой CSS. Пока я использовал OrganicCSS только в одном проекте, но могу сказать что он помогает внести в проект ясность. Я рассортировал разные элементы по разделам и дал классам такие названия чтобы с лёгкостью ориентироваться с чем я имею дело. Например, если у меня есть органелла с названием header , я просто изменю её название на o-header . Просматривая HTML-разметку спустя некоторое время, я сразу вижу что CSS-стили для этого элемента находятся в разделе «органеллы».

Заключение

Это было интересное путешествие. Не знаю буду ли я использовать OrganicCSS в будущем, но это не самое главное. Главное — чему я научился. Я понимал, что мне нужно изменить свой подход к процессу разработки CSS и я это сделал. Мне кажется нужно больше говорить об архитектуре CSS. Как видите, для этого есть много хороших ресурсов. Их только нужно найти, понять как они работают и что с их помощью можно сделать. Только тогда можно выбирать что использовать, а что нет. Даже больше того, когда видите целостную картину, вы получаете возможность придумать что-то, что будет больше соответствовать вашим потребностям.

Примечания

1 В английском языке слово «frame» имеет большое количество значений. Одно из них — «рамка» (напр. для картины или зеркала), его обыгрывает автор статьи в своём рассуждении о работе с фреймворком.

Как писать грамотный css код?

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

В основном работа связана с css (точнее less). При этом:
— не могу ни добавлять классы, ни менять их названия в html
— должен поддерживать работу ie8
— дизайн сайтов делается без дизайнера (то есть один и те же элементы, такие как кнопки могут быть разных размеров в разных частях страницы, и могут вести себя абсолютно по разному)
— не могу использовать js (главный программист говорит, что у него тоже не все так просто с кроссбраузерностью. для меня этот вопрос спорный)

Суть проблемы: как мне научиться писать грамотный css, который я могу использовать в качестве портфолио? Получается, что мой код весь в костылях.

  • Вопрос задан более трёх лет назад
  • 437 просмотров

Суть проблемы: как мне научиться писать грамотный css, который я могу использовать в качестве портфолио? Получается, что мой код весь в костылях.

Для портфолио выбираете любые макеты, которые пришлись Вам по душе и верстаете так как считаете нужным.

На работе делаете так, как это нужно работе. (Да, свое мнение и предложения по улучшению, конечно, нужно высказать руководству).
Совсем не все проекты хочется складывать в портфолио.
Про некоторые вообще хочется сказать: «только никому не говорите, что я принимала в этом участие».

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

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

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

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

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

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

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

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

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

Цукерберг рекомендует:  Аспектно-ориентированное программирование в CodeIgniter из 3

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

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

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

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

Часто при написании 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
Просмотров: 39135
Правила перепечатки

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, но позволит коду отображаться быстрее и уберёт любые препятствия для управления.

Цукерберг рекомендует:  Вакансии Global Smart Project

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

внутри элемента и всё это вложено в элемент , то селектор может выглядеть как 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 и я рад видеть, что вы с ними делаете. Держите меня в курсе о том, как это происходит и удачного вам созидания!

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

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

Правила оформления CSS-кода

1. Синтаксис

1.1 В конце строки должна стоять точка с запятой

После пары свойство: значение обязательно ставится точка с запятой. Без этого знака препинания не будет работать правило в этой строке и следующее за ним.

Хорошо: после каждого значения стоит точка с запятой Плохо: после первого свойства пропущена точка с запятой

1.2 Для отступов внутри правил используйте два пробела

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

1.3 Значение цветов не сокращается

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

1.4 Все пишется строчными буквами

Вce названия тегов и свойства пишутся строчными буквами.

1.5 Нули не пропускаются

Если число дробное и начинается с нуля, то он не опускается (например, .5 вместо 0.5 ).

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

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

1.7 Пробел после двоеточия

В правилах после двоеточия ставится один пробел ( top: 10px; ). При этом перед двоеточием пробел не нужен.

1.8 Пробелы после запятой в цветах

После запятых внутри значений rgb() , rgba() , hsl() , hsla() или rect() пробелы ставятся. Это улучшает читаемость.

1.9 Пробел до и после комбинатора

Между селекторами до и после комбинатора (например, p&nbsp>&nbspa ) ставится один пробел.

1.10 Каждое свойство с новой строки

Одно свойство — одна строка. Каждое объявление в правиле пишется на новой строке.

1.11 Пробел перед фигурной скобкой

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

1.12 Закрывающая фигурная скобка на новой строке

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

1.13 Опускайте единицы измерения

Единицы измерения не нужно писать там, где без них можно обойтись. Например, border:&nbsp0 .

2. Порядок свойств

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

  1. Позиционирование
  2. Блочная модель
  3. Типографика
  4. Оформление
  5. Анимация
  6. Разное

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

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

Сгруппированные свойства в правиле отделяются друг от друга пустой строкой.

Порядок объявления подробных правил, таких как font-size , font-family , line-height , должен соответствовать порядку в сокращённой версии правила. В случае совместного использования подробных и сокращённых правил, первой должна идти сокращённая версия.

3. Имена классов

  • Имена классов пишутся строчными буквами, между несколькими словами используется дефис (но не знак нижнего подчёркивания или camelCase). Дефисы служат разделителями во взаимосвязанных классах (например, .button и .button-cancel ).
  • Имена должны быть такими, чтобы по ним можно было быстро определить, какому элементу на странице задан класс: избегайте сокращений (единственное исключение — .btn для кнопок), но не делайте их слишком длинными (не более трёх слов).
  • Для именования классов используются английские слова и термины. Не используйте транслит для названия классов и атрибутов.

4. Правило @import

Правило @import работает медленнее, чем тег
. В стилях @import использовать не желательно.

5. Варианты шрифта

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

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

Порядок шрифтов следующий:

  1. нестандартный шрифт;
  2. веб-безопасный;
  3. тип семейства шрифта.

Как закомментировать на время код HTML, CSS или PHP, JS

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

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

Но обратите внимание, что комментарии используются также и в html и php… А ведь большинство начинающих путаются на начальном этапе своей работе с сайтом и не знают, как дописать себе необходимые пояснения. Ведь бывает же так, например, вам потребуется на какое-то время деактивировать код html, а потом снова возобновить его функцию — это запросто реализовать, если вы сделали себе пометки на «полях», да мало ли что.

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

Красивое оформление HTML/CSS кода

Зачем красиво оформлять HTML/CSS код в процессе верстки сайта и так ли это важно? Ведь заказчик не видит изнаночную сторону сайта?

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

Красивое оформление HTML

Давайте перечислим основные правила, которые следует соблюдать при написании HTML разметки.

Правила оформления HTML кода

1) Соблюдение отступов для вложенных элементов.

Каждый вложенный элемент, отделяем четырьмя (или двумя) пробелами от его родителя, относительно левого края редактора кода. Тег div является вложенным элементом относительно тега section.

В свою очередь теги h1 и p, являются вложенными элементами в тег div и выравниваются относительно этого тега div, не создавая лесенки.

Заголовок

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

Это правило не распространяется на строчные теги (i, u, a, b, span) внутри абзаца. Например, тег span не нужно начинать с новой строки и ставить перед ним пробелы.

Соблюдайте вами же установленные правила написания кода .

2) Выравнивание тегов по одной линии.

Теги не должны хаотично плясать туда-сюда на странице редактора. Так писать не нужно.

3) Написание комментариев

Когда в разметке, идет подряд много закрывающих тегов div, то ставьте комментарий (название класса) рядом с закрывающим тегом div. Тогда вам не придется гадать, какой именно класс закрывает div.

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

Красивое оформление CSS

Где ставить пробелы?

Между названием селектора и открывающей фигурной скобкой.

Между свойством и значением после двоеточия внутри селектора.

После запятой ставить пробел.

font-family: ‘PT Sans Narrow’, sans-serif;

Правила в селекторе пишем на одном уровне с четырьмя (или двумя) пробелами относительно названия этого селектора.

.header <
padding-top: 20px;
font-size: 15px;
background-color: #333333;
>

Каждый новый селектор отделять одной строкой.

.nav_link <
margin: 0;
padding: 0;
list-style: none;
>

Писать комментарии перед началом стилей каждого блока.

/* Section */
.section <
padding: 30px 0;
>

.section_title <
margin-bottom: 20px;
padding-bottom: 0;
>

.section_img <
background-color: #f8f8f8;
>

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

Как не нужно писать стили

Не пишите свойства в одну строку. В таком стиле оформления кода очень тяжело ориентироваться.

Заключение

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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

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

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 0 ):

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

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