Стандарты названий css классов и id


Содержание

Как называть css-классы

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

Называть классы по содержимому

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

Разделять классы через тире

Если в именах классов несколько слов, то для удобного чтения разделяйте эти слова через тире, как например, было в предыдущем примере с классом для меню в нижней части сайта: .footer-menu. При этом, не используйте для нескольких слов верблюжий стиль (CamelCase), так как это будет затруднять чтение слов и может запутать.

Количество слов в названии класса

Нужно придерживаться как можно меньшему количеству слов для имени класса. Максимум 3-4 слова для именования. Больше количество будет трудно поддерживать.

Префикс в именах классов

Давайте именам классов префиксы — в самом начале названия названия, которые по смыслу подходят для определения зачем используется элемент. Например, для классов, которые используются JavaScript, можно давать префиксы .js-, тем самым давая понять, что такие классы используют скрипты и их не следует удалять у элементов. Для элементов, которые используются в посте блога, можно задать префикс .blog- и в следующий раз в файле css нам уже понятно, что классы используются для оформления элементов блога. Для элементов, которые определяют состояние элемента — его наличие или активность, используйте префиксы has- или is-.

Возможно, вы как-то по другому называете классы элементов. Ждем от вас комментариев!

Подключаем id и class(класс) в css, их различия

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

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

Подключить индивидуальные стили можно с помощью атрибутов «class»(класс) и «id», прописав их свойства в файле .css.

1 способ. Подключение стилей с помощью атрибута «class»

« ) и стили, заданные в файле применяются для данного элемента.

Это наиболее распространенный способ, потому что в большинстве случаев его удобнее использовать, чем описанный ниже с помощью «id». Обычно атрибут «class» используется для оформления стилей таких элементов, которые могут повторяться на одной странице: заголовки, ссылки, текст, таблицы, картинки и т. п. Но даже если тег используется всего 1 раз, к нему тоже можно применить стили с помощью атрибута «class».

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

— Для изменения нескольких тегов с одним классом на разных страницах достаточно изменить всего 1 строчку.

— Если на странице несколько тегов с одним и тем же классом, то при их изменении с помощью скрипта javascript легко запутаться, т. к. при обращении к тегу по имени класса нужно точно указать номер очередности каждого.

Как установить стиль с помощью атрибута class

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

CSS: Селекторы >

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

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

Но что если нам не нужно изменять цвет для всех заголовков

, а только у одного или у двух? CSS предоставляет нам такую возможность. С помощью селекторов id и class , мы можем применять стиль к элементам не зависимо от их имён.

Селектор id

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

Для использования селектора id , нужно создать идентификатор (id), придумав ему уникальное имя, и прописать его в атрибуте id элемента, к которому будет применяться стиль. В CSS коде селектор id начинается с символа # сразу после которого идет имя идентификатора.

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

Пример работы селектора id :

Примечание: не давайте идентификаторам имена, начинающиеся с цифр, они не будут работать в браузере Mozilla Firefox .

Селектор class

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


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

Правила для имен классов:

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

CSS код для классов ничем не отличается от CSS кода для других селекторов. После имени класса идет блок объявлений, содержащий все необходимые свойства:

Если атрибут class , с одним и тем же именем, добавлен к нескольких разным тегам, а вам нужно чтобы стиль применялся только к определенным тегам, то в селекторе перед обозначением класса нужно указать тег, к которому должен быть применён стиль:

Как вы уже заметили из примера, писать точку перед именем класса в HTML коде (в значении атрибута class) не нужно. Она требуется только в обозначении селектора в таблице стилей.

Часть 1. Селекторы CSS. Теги, классы, >

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

  1. Селекторы тегов.
  2. Селекторы классов.
  3. Селекторы ID.
  4. Селекторы групп.
Илон Маск рекомендует:  Что такое код array_values

1. Селекторы тегов

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

, которые имеются на веб-странице. Для этого вам понадобится создать стиль, где селектором будет h3 (обратите внимание: в CSS угловые скобки <> тега не записываются, а используется только его имя):

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

на странице, сколько бы их ни было. Согласитесь, что это очень быстро и удобно. Аналогично можно создавать стили для других тегов, заменяя название селектора на нужное вам ( p , h1 , h2 , h3 и т. д.).

2. Селекторы классов

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

Итак, чуть выше мы применили стиль для всех тегов

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

на зеленый? На помощь приходят селекторы классов. Всё что вам необходимо сделать, это создать стиль, где селектор – придуманное вами имя класса. Мы назовем класс greentext и запишем правило:

Но это еще не всё. Теперь, чтобы изменить цвет для одного из тегов

на странице, нужно отредактировать HTML-документ, применив класс greentext к необходимому нам тегу. Записывается это так:

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

Запомните несколько правил написания классов:

  • в CSS перед названием селектора класса обязательно ставится точка (но при присвоении класса в HTML-документе эта точка не нужна);
  • в названии классов можно использовать только буквы латинского алфавита, дефис, символ подчеркивания, цифры;
  • название класса всегда должно начинаться с буквы (правильные варианты названий: .intro , .img-border , .nav_menu_01 ; неправильные: .2color , .-link , ._divider );
  • названия классов CSS чувствительны к регистру, поэтому классы вроде .review и .Review будут восприниматься как два отдельных.

3. Селекторы ID

Идентификатор определяет уникальное название элемента. Записывается он почти так же, как и класс, только в CSS вместо точки ставится символ решетки # :

В HTML-документе идентификатор присваивается с помощью атрибута id :

Возможно, у вас возник вопрос: в чем разница между идентификатором и классом? Существует несколько отличий:

  • ID – это уникальное название элемента на веб-странице, которое должно встречаться на ней только один раз (например, шапка сайта и подвал: и ), в то время как класс может присваиваться нескольким элементам с целью отличать их от остальных;
  • идентификаторы удобны для JavaScript-разработчиков, поскольку позволяют получить быстрый доступ к элементу DOM из скриптов (во многом именно поэтому необходимо, чтобы ID встречался на странице лишь один раз);
  • каждое правило CSS имеет свой так называемый вес (от веса зависит, какое из правил получит более высокий приоритет при выполнении). Идентификатор имеет больший вес, чем класс, поэтому, если элементу присвоен и ID, и класс, предпочтение отдается ID. Пример:

У ID больший вес, поэтому цвет текста будет желтым (yellow).
с помощью идентификаторов можно ставить якорные ссылки на определенные элементы веб-страницы. Достаточно присвоить этому элементу ID…:

…и дать на него ссылку вида http://site.com/category/page/#description .


4. Селекторы групп

Мы подошли к четвертому типу селекторов CSS – групповые селекторы. Представьте ситуацию, что вам необходимо сделать шрифт жирным для нескольких элементов веб-страницы – p , h1 , h2 , h3 . Можно было бы записать этот стиль отдельно для каждого элемента:

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

Конечно, в перечислении могут участвовать не только селекторы тегов, но и классы, и идентификаторы.

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

Выводы

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

Для изменения стиля содержимого тегов используйте селекторы тегов.

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

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

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

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

Селекторы тегов, классы ( > Игорь • Обновление:Февраль 25, 2020 • 8 комментариев к записи Селекторы тегов, классы (class) и идентификаторы (id) в языке каскадных таблиц стилей CSS

Здравствуйте, уважаемые читатели блога Goldbusinessnet.com. Сегодня мы в «Учебнике CSS» начинаем очередную тему и разберем селекторы тегов, идентификаторы и классы.

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

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

Селекторы тегов

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

Чтобы стили CSS корректно работали, необходимо каждый тег связать с нужным набором свойств (цвет, размер, фон). Из всех 3 способов присоединения стилей к HTML документу самым лучшим в современных условиях является метод связанных стилей, который предусматривает создание отдельного файла (на большинстве ресурсов он называется style.css).

Для примера пропишем определенные свойства тегу абзаца p в соответствии с установленными стандартами записи правил CSS. Тут в качестве одного из связующих звеньев между кодом HTML странички и файлом style.css как раз выступает селектор тега p:

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

Как видите, с помощью селектора p мы смогли сформировать внешний вид данного абзаца, то есть задать цвет текста и его расположение (текст выравнивается по обоим краям). Стили можно применять к любым тегам, которые являются содержимым контейнера body.

Идентификаторы ( >

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

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

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

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

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

Поясню на примере. В HTML документе может встретиться тег div, который, как я уже говорил, является основой блочной верстки, где указано наименование идентификатора ( ):

И для этого идентификатора заданы свойства стилей (скажем, в файле style.css):

В браузере этот элемент приобретет следующий вид (пример 1):

Надеюсь, здесь все понятно. Если селектор id задает свойства CSS для уникального элемента, то классы (class) дают возможность определить стиль отображения для сколь угодно большого числа элементов в документе HTML. То есть, различным тэгам может соответствовать одно и то же название class, которому соответствуют определенные стили:

Совершенно очевидно, что для элементов, которым присвоены одинаковые классы, применяются одни и те же свойства. Синтаксис селектора для тега p в файле CSS:

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

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

Теперь конкретный пример. В файле CSS прописаны свойства для определенного класса:


Который применим сначала к заголовку h3:

Он будет выглядеть так при отображении страницы (пример 2):

А затем и к абзацу:

Который будет иметь такой дизайн (пример 3):

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

Какие символы допустимы в именах / селекторах классов CSS?

какие символы / символы разрешены в селекторах классов CSS? Я знаю, что следующие символы недействительным, но какие символы действительный?

8 ответов

вы можете проверить непосредственно в грамматики CSS.

в принципе 1 , имя должно начинаться с символа подчеркивания ( _ ), дефис ( — ), или письмо( a – z ), за которым следует любое количество дефисов, подчеркиваний, букв или цифр. Есть подвох: если первый символ-дефис, то второй символ должен быть 2 быть буквой или подчеркиванием, и имя должно быть не менее 2 символов длинный.

идентификаторы, начинающиеся с дефиса или подчеркивания, обычно зарезервированы для расширений, специфичных для браузера, как в -moz-opacity .

1 все это немного усложняется включением экранированных символов Юникода (которые никто не использует).

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

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

любой символ, кроме NUL, разрешен в именах классов CSS в CSS. (если CSS содержит NUL (экранированный или нет), результат не определен. [CSS-символы])

Матиас Bynens’ ссылки объяснение и демо показывает, как использовать эти имена. записано в коде CSS имя класса может понадобиться побег, но это не меняет название класса. Е. Г. неоправданно за-бежал представление будет отличаться от других представителей этого имени, но он по-прежнему относится к тому же имя класса.

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

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

Итак, если вам нужно превратить случайную строку в имя класса CSS: позаботьтесь о NUL и space и escape (соответственно для CSS или HTML). Сделанный.

читать W3C spec. (это CSS 2.1, найдите подходящую версию для вашего предположения о браузерах)

edit: соответствующий абзац следует:

в CSS идентификаторы (включая имена элементов, классы и ID в селекторах) могут содержать только символы [a-z0-9] и ISO 10646 символы U + 00A1 и выше, плюс дефис ( — ) и подчеркивание (_); они не могут начинаться с цифры, или дефис следуют цифры. Идентификаторы также могут содержать экранированные символы и любой символ ISO 10646 как числовой код (см. Следующий пункт). Для экземпляр, идентификатор » B & W?» могут быть написано как » B\&W\?»или» B\26 W\3F».

edit 2: как указывает @mipadi в ответе триптиха, есть это предостережение, также на той же веб-странице:

в CSS, идентификаторы могут начинаться с ‘-‘ (тире) или ‘_’ (подчеркивание). Ключевое слово и имена свойств, начинающиеся с ‘-‘ или’_’ зарезервированы для расширения поставщика. Такие расширения поставщика должны один из следующих форматов:

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

другие известные примеры:

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

авторы должны избегать поставщиков расширения

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

Если вы должны были дать элементу значение ID [email protected]$%^&*()_+-=,./’;:»?> селектор будет выглядеть так:

CSS:

JavaScript:

полное регулярное выражение:

Итак, все ваши перечисленные символы, кроме» — » и » _ » не допускаются при непосредственном использовании. Но вы можете кодировать их с помощью обратной косой черты foo\

bar или используя обозначение unicode fooE bar .


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

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

источники:

для классов HTML5/CSS3 и идентификаторов можно начинать с чисел.

PHPTIME

Прямой эфир

adogay 9 января 2020, 13:49

pechen 5 декабря 2020, 06:39

clod 2 февраля 2020, 18:28

isudakoff 19 марта 2020, 07:55

pantsarny 23 апреля 2015, 10:40

Adik88 10 марта 2015, 19:43

JudKavel 2 февраля 2015, 23:11

rmrevin 4 декабря 2014, 20:55

Grover 13 октября 2014, 16:48

amor_amore 15 сентября 2014, 13:59

rmrevin 3 сентября 2014, 13:51

Adik88 2 сентября 2014, 13:13

rmrevin 2 сентября 2014, 13:12

rmrevin 16 июня 2014, 19:27

hui_nana 28 мая 2014, 13:33

Grover 26 мая 2014, 11:42

Grover 26 мая 2014, 11:41

hui_nana 23 мая 2014, 10:26

Блоги

  • Q&A9.42
  • Frontend7.96
  • Yii framework7.92
  • OS Linux5.66
  • CMS 1C-Bitrix5.65
  • PHP. Продукты4.63
  • PHP. Производительность4.53
  • PHP. Особенности и фичи4.53
  • Безопасность4.52

  • HTML51.25

Инструкции по созданию имен для CSS

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

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

CSS-класс и имя файла

Организация CSS-файлов

Присвоение имен CSS-классам

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

Для присвоения имен классам мы опираемся на следующие правила:

  • CSS-классы, которые предназначены для совместного использования, должны начинаться с префикса g-. Например, у нас могут быть классы g-submit-button, g-link-button, стилевое описание которых следует поместить в вышеупомянутый файл global.css. У вас получится синтаксис следующего вида:
  • Каждый файл, выводящий какую-либо запись, должен иметь корневой контейнер, в котором заключен контент. В нем объявляется класс, имя которого в точности повторяет путь до файла. Например, для файла, доступного по адресу post/index.php, эта конструкция выглядит так:
  • Описание CSS-стилей должно быть помещено в соответствующий контроллеру CSS-файл. Каждое объявление стиля должно начинаться с названия класса корневого контейнера. Например, чтобы объявить CSS-стили для класса item корневого контейнера post-index, мы должны вставить следующую запись в post.css файл:
  • Создание имен CSS-классов и стилей для виджетов в точности повторяют вышеописанные инструкции. Например, виджет LatestComments должен использовать корневое имя CSS класса widget-latest-comments и обращаться за стилями комментариев к файлу widget-latest-comments.css:

Файл макета должен также содержать корневой контейнер с префиксом layout-. Например, макет main должен использовать CSS-класс layout-main в качестве корневого контейнера. Чтобы избежать конфликтов с CSS-классами, предназначенными для стилизации контента, классы контейнерных элементов в макете могут начинаться с имени класса корневого контейнера. Например, раздел заголовка может использовать layout-main-header, а раздел содержания — layout-main-content.

Включение CSS-файлов

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

В рабочем режиме, все CSS-файлы должны быть объединены и сжаты в один файл. Имя файла должно содержать дату (например, styles-201010221550.css).

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

Объединение и сжатие файлов CSS

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

Во-первых, мы объявляем все имена CSS-файлов в виде массива в параметрах приложения.

Во-вторых, пишем консольную команду, чтобы объединить и сжать CSS-файлы. Для этих целей может быть использован YUI-компрессор. Эта команда будет считывать названия CSS-файлов из параметров приложения, объединять все содержимое файлов в один файл, и вызывать YUI-компрессор для компрессии 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. тип семейства шрифта.


Как работают в CSS классы и идентификаторы

Дата публикации: 2020-08-09

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

Стилевые классы

Классы – это наиболее часто используемые селекторы в css. В большинстве случаев прописывание стилей различным элементам идет через них. Все потому, что class, в отличие от id, можно задавать многим тегам, поэтому он может быть применен для стилизации целой группы блоков. Например:

Теперь какому бы блоку мы ни прописали class center-wrap, он получит максимальную ширину в 960 пикселей и будет центрирован. И мы можем прописать его и для шапки, и для контента, и для футера.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

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

Несколько классов: как это работает?

Стилевые классы имеют еще одну особенность – их можно задавать несколько одному html-элементу. Даже не несколько, а бесконечное количество, тут никаких ограничений нет. Например:

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

Если оба класса, которые применяются к элементу, содержат одинаковое стилевое свойство с разным значением, то применится то значение, которое записано в таблице стилей последним. Например:

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Идентификаторы

Наверняка вы зарегистрированы в какой-нибудь соц. сети? У вашему аккаунта там гарантированно есть какой-то id. Правда это не имеет ничего общего с css-идентификаторами, но общая их особенность вот в чем – id может быть только одним для одного конкретного элемента.

Нельзя задавать более 1 id одному элементу, а также нельзя давать один и тот же идентификатор двум разным элементам. Задается он с помощью атрибута id.

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

Приоритетность в стилях

Если говорить о приоритетности в css, то тут идентификатор берет верх над классом. Давайте рассмотрим пример:

У нас есть 1 блок. Мы задали ему класс и идентификатор. Пропишем стили:

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

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

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

А теперь обратимся, допустим, к селектору #p-text. Он очень точный, так как выберет всего 1 элемент, у которого имеется этот идентификатор. Соответственно, вы можете привязать к элементу хоть 7 классов и прописать в них стили, но идентификатора хватит, чтобы все нужные стили переопределить.

Подытоживаем

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

Стилевой класс вы можете использовать как для стилизации группы элементов, так и для одного. Идентификатор же используется строго для одного элемента. Если вы попробуете один и тот же id прописать двум элементам, то это не сработает. Также нельзя одному элементу определять более одного идентификатора – это уникальная метка, которая может быть только в одном числе.

Если мы говорим о приоритетности, то id приоритетнее класса, но тот, в свою очередь, приоритетней обычных селекторов тегов.

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Каково стандартное соглашение об именах для идентификаторов и классов html/css?

Зависит ли он от используемой вами платформы или существует общее соглашение, которое предлагает большинство разработчиков?

Существует несколько вариантов:

  • ‘ — выглядит довольно совместимо с кодом javascript.
  • — больше похож на html5-подобные атрибуты и другие вещи в html.
  • — выглядит довольно согласованно с кодом ruby ​​и по-прежнему является допустимым идентификатором внутри Javascript

Я думал, что № 1 и № 3 выше имеют наибольший смысл, потому что они играют лучше с Javascript.

Есть ли правильный ответ на этот вопрос?

Я использую подчеркивания все время из-за дефиса, испортившего подсветку синтаксиса моего текстового редактора (Gedit), но это личное предпочтение.

Я видел, как все эти соглашения использовались повсюду. Используйте тот, который, по вашему мнению, лучше всего — тот, который выглядит лучше всего/проще для чтения для вас, а также проще всего напечатать, потому что вы будете использовать его много. Например, если у вас есть клавиша подчеркивания на нижней стороне клавиатуры (маловероятная, но вполне возможная), тогда придерживайтесь дефиса. Просто идите с тем, что лучше для вас самих. Кроме того, все три из этих конвенций легко читаемы. Если вы работаете в команде, не забудьте сохранить соглашение с командой (если оно есть).

Обновление 2012

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

Обновление 2013

Кажется, мне нравится смешивать вещи каждый год. После перехода на Sublime Text и использования Bootstrap некоторое время я вернулся к тире. Для меня сейчас они выглядят намного чище, чем un_der_scores или camelCase. Моя первоначальная точка все еще стоит: нет стандарта.

Обновление 2015

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

Обновление 2020 (вы просили об этом)

Я принял стандарт BEM для моих проектов в будущем. Названия классов в конечном итоге довольно многословны, но я думаю, что это дает хорошую структуру и возможность повторного использования классов и CSS, которые идут с ними. Я полагаю, что BEM на самом деле является стандартом (поэтому мой no может стать yes возможно), но он все еще зависит от вас, что вы решили использовать в проекте. Самое главное: согласуйтесь с тем, что вы выберете.

Илон Маск рекомендует:  Asp компонент permission checker
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL