Содержание

Правила написания CSS

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

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

Правило написания CSS №1 — Забейте на порядок

Многие дизайнеры используют порядок написания стилей, чтобы задавать разные приоритеты. То есть если мы напишем два свойства с разными значениям в одном типе CSS стиля (inline-стиль, внедрённый стиль и другие), то будет применён тот стиль, который написан ниже. Причём, это относится не только к свойствам, но и к селекторам. То есть часто на разных страницах, в разных порядках подключается стили, чтобы каждая страница применяла в итоге свои. Разумеется, это крайне плохо, потому что если случайно нарушить порядок, то ошибка проявится (и самое страшное — не факт, что сразу), и найти её будет весьма трудно. Вдобавок, велика вероятность дублирования, а это уже «грязь«, которая, в лучшем случае, просто увеличит размер файла, а в худшем даст сбой в самый неожиданный момент. Поэтому избегайте влияние порядка по максимуму!

Правило написания CSS №2 — Не бойтесь наследования

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

Правило написания CSS №3 — Соблюдайте свой стиль

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

b {
  font-size: 120%;
}

p {
  color: red;
  font-size: 80%;
}

То есть у меня правила такие: название селектора, пробел, фигурная скобка, со следующей строки табуляция, название свойства, двоеточие и через пробел значение. Если имеются другие свойства у селектора, то со следующей строки, через табуляцию, вновь название свойства, а через двоеточие и пробел — значение. Все селекторы (в моём примере — b и p) я отделяю пустой строкой. Вот такой мой стиль написания стилей. Ещё рекомендуется писать селекторы по алфавиту — это тоже правильно, и я последнее время так их и пишу. Но главное — это соблюдать свой собственный стиль всегда и везде. Потому что многие его меняют день ото дня, а потом у них затрудняется восприятие того, что они понаписали.

Правило написания CSS №4 — Используйте комментарии

Это правило, которое соблюдают поистине единицы, к которым даже я не отношусь (хотя пытаюсь исправляться). Многие скажут использование комментариев — это не очень хорошо, потому что, во-первых, они увеличивают размер файла, а, во-вторых, зачем на них тратить время, если данный стиль нужен только мне, и никто больше на него смотреть не будет. Оба мнения ошибочные: первое потому, что никто Вас не заставляет писать целые тома, а 4-5 слов для каждого селектора увеличат в среднем не более, чем на 10%. А второе мнение ошибочно потому, что никто не знает, как будет развиваться Ваш сайт. И если он будет посещаемым, и Вам придёт в голову сменить дизайн, то будет плохо для человека, которого Вы наймете. Или если сами захотите сменить дизайн, то тоже лучше не будет, так как Вы уже забудете: где, что и зачем находится. Поэтому старайтесь комментировать то, что пишите, почаще.

Правило написания CSS №5 — Файл сброса

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

Заключается оно в следующем: необходимо создать CSS файл (reset.css), который будет сбрасывать все стили, применённые к стандартным элементам HTML. Например, убрать жирное начертание у тега <b> или убрать больший размер текста у заголовков <h2>. То есть просто уничтожить форматирование HTML-документа. Это хорошо, так как Вы будете точно знать, что никаких сюрпризов не будет, и Ваш код любой браузер воспримет на «Ура«, а уже отсюда можно потихоньку наращивать файл стилей.

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

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

  • Создано 05.08.2010 17:06:57
  • Михаил Русаков

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

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

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

Руководство по оформлению кода HTML/CSS

Хочешь знать больше про веб?

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

Подписаться

×

Код HTML/CSS нужно оформлять красиво, а значит особенности верстки – обязательная часть программы обучения веб-разработке. Сайт proglib.io рассказал, как освоить нужные знания с нуля.

Photo by Jantine Doornbos on Unsplash

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

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

Делайте отступы

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

Тег div является вложенным элементом относительно 

section.

<section>
    <div>
    </div>
</section>

В свою очередь теги h2 и p выравниваются относительно тега div, не создавая «лесенки».

<section>
    <div>
        <h2>Заголовок</h2>
        <p>Текст</p>
    </div>
</section>

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

Выравнивайте теги по одной вертикальной линии

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

Так писать не надо:

<section>
    <div>
        <h2>Заголовок</h2>
        <p>Текст</p>
 </div>
      </section>

Комментируйте код

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

 
<div>
    <div>
        <div>
          . ....
        </div><!-- .title -->
    </div><!-- .header -->
</div><!-- .wraper -->

Начало каждого блока желательно начинать с короткого комментария с названием секции. Это очень удобно и позволит вам легко ориентироваться в структуре документа.

 
<!-- Footer -->
<footer>
    <div></div>
</footer>

Всегда пишите в нижнем регистре

Весь код должен быть написан в нижнем регистре. Это относится к названиям элементов и атрибутов, значениям атрибутов, селекторам, свойствам и их значениям (кроме текста). Текст внутри тегов можно писать с заглавной буквы в начале предложений, а для остального существует свойство text-transform: uppercase;.

Используйте кодировку UTF-8

UTF-8 – один из самых распространенных стандартов кодирования, который позволяет наиболее компактно хранить и передавать символы Юникода.  Убедитесь, что ваш редактор использует UTF-8. Всегда указывайте кодировку в шаблонах и документах HTML с помощью <meta charset="utf-8">. Опускайте кодировку для файлов CSS, поскольку для них UTF-8 задана по умолчанию.

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

Валидная разметка – это код, который написан в соответствии с определенными стандартами. Их разработал Консорциум Всемирной Паутины – World Wide Web Consortium (W3C). При помощи таких инструментов, как W3С HTML Validator, можно проверить качество кода HTML и CSS. Написание валидного HTML оттачивает знание ограничений языка разметки и понимание технических требований.

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

Семантическая верстка (разметка) – это подход к созданию веб-страниц, основанный на расстановке тегов HTML в соответствии с их семантикой. Проще говоря, используйте теги по назначению: <hX> для заголовков, <p> для абзацев, <a> для ссылок и т. д. Это поможет поисковому роботу проанализировать страницу сайта и подготовить ее описание для пользователей, а также повысит приоритет выдачи.

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

Не указывайте протокол при добавлении внешних ресурсов

Опускайте название протокола (http:// или https://) в ссылках на картинки и другие внешние ресурсы, файлы стилей или скрипты. Это делает ссылку относительной и предотвращает, например, использование незащищенного контента на защищенном сайте, а также незначительно уменьшает размер файлов.

Не используйте необязательные теги и лишние обертки

Для уменьшения размера файлов и лучшей читаемости старайтесь избегать использования необязательных тегов и лишних оберток (wrapper). В спецификации HTML5 есть их список.

Изучите правила оформления CSS

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

Изучите нюансы синтаксиса CSS

Ставьте точку с запятой после каждого объявления. Это необходимо для беспрепятственного добавления новых свойств и уменьшения путаницы. Используйте пробелы после двоеточий в объявлениях. Это поможет вам лучше ориентироваться в документе CSS. Начинайте каждый селектор или объявление с новой строки. По возможности объединяйте свойства отдельных блоков в группы и обозначайте их комментариями, разделяя переносом строки. Не указывайте единицы измерения для нулевых значений, если на это нет причины. Трехсимвольная шестнадцатиричная запись для цветов короче и занимает меньше места (color: #ааа;).

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

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

Используйте автопрефиксер

Префиксы нужны, чтобы «подружить» свойства CSS c различными браузерами. Изначально они были придуманы, чтобы помочь разработчикам браузеров адаптировать спецификацию под свои нужды. Чтобы не заниматься этим самостоятельно, используйте утилиту нового поколения autoprefixer для добавления префиксов к экспериментальным свойствам из CSS-3.

Будьте последовательны!

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

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

Рекомендовано легендарной Mozilla

/* mozilla.org Base Styles
* maintained by fantasai
*/
/* Suggested order:
* display
* list-style
* position
* float
* clear
* width
* height
* margin
* padding
* border
* background
* color
* font
* text-decoration
* text-align
* vertical-align
* white-space
* other text
* content
*
*/
...

Источник:

http://www.mozilla.org/css/base/content.css

В этой статье, опубликованной блогом Feifei, перечисленные выше атрибуты разделены на три группы: атрибуты отображения, собственные атрибуты и атрибуты текста. В ответ inG добавил, что это также связано с процессом синтаксического анализа браузера: браузер сначала находит DOM, затем анализирует свои собственные свойства, а затем анализирует внутренние объекты. (Не было найдено соответствующей информации на английском языке, и те, кто знает эту информацию, также хотят сообщить)

В официальном Mozilla нет рекомендаций по порядку написания CSS. Вероятно, что разработчик интересовался исходными файлами CSS fantasai, читая эту статью из ссылки на разметку fantasai’s mozilla.org.

По алфавиту

Время от времени есть несколько хороших статей о NETTUTS. Это не так. Не так давно Тревор Дэвис поделился статьей: 5 способов мгновенного написания лучшего CSS. В этой статье рекомендуется сортировать свойства CSS в алфавитном порядке.

Преимущество: просто, любой может просто следовать за ним и понимать.

Недостатки: слишком прост и не хватает логики. Например, position, left, top и т. Д. Если это тесно связанное свойство отсортировано в алфавитном порядке, его не удобно писать и поддерживать. Рекомендуемые сорта Энди Форда

Энди Форд является экспертом в области HTML и CSS. Недавно он написал статью «Порядок дня: свойства CSS». Рекомендуемый порядок написания CSS: 


1. Display & Flow
2. Positioning
3. Dimensions
4. Margins, Padding, Borders, Outline
5. Typographic Styles
6.  Backgrounds
7. Opacity, Cursors, Generated Content
Примеры:
el {
display: ;
visibility: ;
float: ;
clear: ;
position: ;
top: ;
right: ;
bottom: ;
left: ;
z-index: ;
width: ;
min-width: ;
max-width: ;
height: ;
min-height: ;
max-height: ;
overflow: ;
margin: ;
margin-top: ;
 
margin-right: ;
margin-bottom: ;
margin-left: ;
padding: ;
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;
border: ;
border-top: ;
border-right: ;
border-bottom: ;
border-left: ;
border-width: ;
border-top-width: ;
border-right-width: ;
border-bottom-width: ;
border-left-width: ;
border-style: ;
border-top-style: ;
border-right-style: ;
border-bottom-style: ;
border-left-style: ;
border-color: ;
border-top-color: ;
border-right-color: ;
border-bottom-color: ;
border-left-color: ;
outline: ;
list-style: ;
table-layout: ;
caption-side: ;
border-collapse: ;
border-spacing: ;
empty-cells: ;
font: ;
font-family: ;
font-size: ;
line-height: ;
font-weight: ;
text-align: ;
text-indent: ;
text-transform: ;
text-decoration: ;
letter-spacing: ;
word-spacing: ;
white-space: ;
vertical-align: ;
color: ;
background: ;
background-color: ;
background-image: ;
background-repeat: ;
background-position: ;
opacity: ;
cursor: ;
content: ;
quotes: ;
}

Порядок Энди примерно такой же, как рекомендованный Fantasai, но детали более оперативны.
На SitePoint также есть очень оживленное обсуждение: как вы упорядочиваете свои свойства в блоке объявлений?

Мне нравится порядок написания фантазая и Энди, но в порядке фантазии, атрибут «я» немного расплывчатый, а у Энди слишком тонкий, чтобы помнить. Я думаю, что мы можем извлечь уроки из классификации свойств CSS в Спецификации CSS 2.1 и немного изменить порядок Энди:

1. Свойства, которые влияют на поток документов (такие как отображение, положение, плавание, очистка, видимость, макет таблицы и т. Д.)
2. Свойства блочной модели (такие как ширина, высота, поля, отступы, границы и т. Д.)
3. Связанные с макетом атрибуты (такие как: шрифт, высота строки, выравнивание текста, отступ текста, выравнивание по вертикали и т. Д.)
4. Декоративные атрибуты (такие как: цвет, фон, прозрачность, курсор и т. Д.)
5. Создайте свойства контента (такие как: контент, стиль списка, цитаты и т. Д.)

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

1. Как насчет сокращений? Например, рамка: 1px сплошной красный, где ширина рамки связана с блочной моделью, а цвет границы — декоративный. Как это организовать?
2. Учитывая функцию скининга, должен ли цвет, фон, цвет рамки и т. Д. Быть связан с цветом? Для легкой модификации позже.
3. Как насчет хаков? Поместите его отдельно в конец файла CSS, или это прямо рядом с атрибутом hack?
4. Как сохранить комментарий к добавленным или измененным атрибутам при ведении css-файла коллеги? Как писать?
5. Кроме того, учитывая CSS Sprite, все селекторы фонового изображения собраны вместе? Но это выходит за рамки темы этой статьи: порядок и организация атрибутов в селекторах CSS.
6. Дальнейшее обсуждение: структурная организация в файле CSS и организация нескольких файлов CSS.

Правила именования CSS:

В Css, как и в других программах, есть концепция scoping с глобальными и локальными методами.

Например:

P {background: # f00;} / * область действия: глобальная * /

Div. div p {color: # 000;} / * Область применения: в классе div * /

Введение нескольких методов письма и сравнение веса Css

1) Метка: весовое значение 0,0,0,1

2) Класс: веса 0,0,1,0

3) Выбор атрибута: весовое значение 0,0,1,1

4) ID: весовое значение 0,1,0,0

5) Вес важного до 1,0,0,0

Я считаю, что когда вы пишете Css, когда проект относительно велик, а контент велик, именование — это головная боль, и блок должен выражать разные стили. Это хороший инструмент для освоения правил именования. Позволяет работать с меньшими усилиями. Примерно так: (перепечатано с: http://www.cssforest.org/blog/index.php?id=143, вы можете перейти сюда, чтобы увидеть больше технических статей)

Чтобы предотвратить потерю смысла имени при изменении состояния, наиболее распространенными являются имена классов, используемые для разметки, такие как «левый» и «правый». Когда левый столбец больше не является левым, имя «левый» не имеет практического значения а. Это противоречит нашей рекомендации о том, что «наименование должно быть осмысленным», а использование серийных номеров еще более проблематично. Кажется правильным, но есть проблема, которая долго беспокоит меня. Если один и тот же модуль появляется на странице более одного раза, а детали не совпадают, какое имя должно появиться позже? Являются ли «один» и «два» не серийными номерами? Фактически, мы хотим избежать ситуации, когда при изменении состояния (производительности) соответствующее имя определенного класса не потеряет своего значения.

Так называемый статус (производительность) изменяется, есть несколько случаев:

1. HTML-код не изменился, определение стиля изменилось. Если в именовании используется имя, которое указывает на определенное состояние, такое как «красный», «шрифт 14» и т. Д., Это неизбежно приведет к ситуации, когда определение не соответствует наименованию, и это окажет большее влияние на последующие эффекты.
2. Определение стиля не изменяется, а HTML изменяется. Изменение HTML означает, что имя класса может быть изменено, то есть, если имя класса использует имя, которое представляет определенное состояние, это более благоприятно для изменения.
3. Оба определения стиля и HTML изменились. Просто рассмотрим последствия первого случая.

Фактическая ситуация — это не просто определенная ситуация, а часто смешанная.
правило

[Префикс модуля] _ тип _ (роль | статус) n _ [позиция n]

Условные обозначения:

* (Обязательно): должно существовать.
* [Необязательно]: можно выбрать при необходимости.
* |: Выберите еще один.
* n: может быть несколько

Описание существительного:

Префикс модуля
Префикс используется, когда модуль определен.
тип
Определяет тип содержимого класса. Например, поля ввода, текст, абзацы и т. Д.
эффект
Определяет роль класса для дополнения типа.
состояние
Определяет состояние класса для дополнения типа.
расположение
Определите позицию, используемую классом, такую ​​как домашняя страница, навигация и т. Д. Использование слов, подобных левому и правому, не исключается, но его следует избегать, насколько это возможно.
* Каждый элемент может иметь свою собственную таблицу сокращений, и сокращения с одинаковыми названиями должны быть как можно более однородными.
* Выбранное слово не должно быть словом, которое конкретно указывает на определенное состояние (например, цвет, размер и т. Д.), Чтобы имя не теряло значения при изменении состояния.
* Состоит из строчных букв (a-z) и цифр (0-9), которые не начинаются с цифры.
* Обеспечить возможность повторного использования класса (.class) и уникальность объекта (#id). Избегайте использования зарезервированных слов для id.

Пример:

Префикс модуля:
* Поп
* Public global, гб
* Название, синица
* Подсказка
* Меню
* Информация информация
* Предварительный просмотр pvw
* Tips tips
* Навигация навигация
Тип:
* Кнопка bt
* Текст TX
* Параграф р
* Иконка
* input input
* Цветной цвет, с
* Фон бг
* Бор Бор
Роль:
* Набор
* Добавить добавить
* Удалить дель
* Операция оп
* Пароль pw
* Импорт вкл
Статус:
* Успешный успех
* Не удалось потерян
* Прозрачный транс
Расположение:
* Публичный гб
* Бор Бор
* Параграф р
* Поп
* Название, синица
* Меню
* Контент продолжен
* Навигация навигация

Китайское объяснение именования Китайское объяснение именования
Поле ввода текста . input_tx цвет текста абзаца .c_tx_p
Поле ввода пароля .input_pw Слой настройки всплывающих фотографий .pop_set_photo
Поле ввода пароля для входа .input_pw_login Запрос на успешное задание журнала .hint_suc_blogset
Цвет текста .c_tx общедоступный совет .hint_gb

Задание нескольких простых вопросов может помочь нам завершить именование:

1. «Какой тип определения?» — это поле ввода, ввод.
2. «Тип дополнения» — если описание слова неясно, затем добавьте тип, текстовое поле ввода, input_tx.
3. «Где использовать?» — определить, где использовать? Поле ввода текста поиска для домашней страницы, input_search_index.

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

Золотые рекомендации по написанию чистого CSS

HTML и CSS

    CSS

Поделиться

Ниже приводится выдержка из нашей книги «Мастер CSS», написанной Тиффани Браун. Копии продаются в магазинах по всему миру, или вы можете купить ее в виде электронной книги здесь.

Золотые рекомендации по написанию чистого CSS

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

  • Избегайте глобальных селекторов и селекторов элементов
  • Пропустить слишком конкретные селекторы
  • Использовать семантические имена классов
  • Не привязывайте CSS слишком тесно к структуре разметки

Давайте рассмотрим их один за другим.

Избегайте глобальных селекторов

Глобальные селекторы включают универсальный селектор ( * ), селекторы элементов, такие как p , кнопка и h2 , и селекторы атрибутов, такие как [тип=флажок] . Объявления стилей, применяемые к этим селекторам, будут применяться к каждому такому элементу на сайте. Вот пример:

 кнопка {
  фон: #FFC107;
  граница: 1px отступ #FF9800;
  дисплей: блок;
  шрифт: полужирный 16px / 1,5 без засечек;
  запас: 1рем авто;
  ширина: 50%;
  набивка: 0,5 бэр;
}

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

 <раздел>