Стиль css классы стилей

Как строить структуру CSS и называть классы

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

Стандартные названия классов для разных элементов

• navbar — верхнее меню навигации, которое может включать в себя не только меню, но и логотип, а также часто кнопки и поле поиска.
• название-родительского-класса-item — элемент какого-то списка, например — перечень работ в портфолио. Обратите внимание, что он обязательно включает в себя название класса родительского тега (например — portfolio-list-item ).
• название-родительского-класса-link — ссылка в меню (например, menu-footer-link ).
• название-родительского-класса-description — если у вас под названием какого-то элемента (например, преимущества компании) есть краткое описание ( preference-description );
• название-элемента-list — перечень чего-то, например — постов из блога ( blog-post-list ).
• название-родительского-класса-title , название-родительского-класса-heading — названия, заголовки каких-то блоков. Их лучше оформлять тегом h (например — portfolio-item-title , our-team-item-heading );
• section-title — заголовок для секции (смыслового блока, выделенного как правило фоном, отличным от соседних смысловых блоков).
• btn , button — название класса для кнопки. Модификаторы (цвет, размер) пишутся через дефис (например, btn-large или button-selected )
• модификаторы — используются если вы видите два очень похожих элемента, например — у кнопок одинаковый шрифт, радиус закругления, и padding. Если две кнопки отличаются в дизайне только характеристиками одного свойства (например, цвета или padding), то логично не создавать два разных класса с повторяющимися наборами свойств, а сделать один класс btn и класс-модификатор, который добавляет кнопке дополнительные свойства или изменяет их (например btn-primary или btn-red ).
• Правило: название модификатора должно отвечать на на вопрос «Какое свойство он меняет?» или «Какая смысловая нагрузка элемента с этим модификатором?». Например, btn-large — большая кнопка, font-medium — средний шрифт, btn-success — кнопка успешного выполнения действия.

О чем еще стоит думать на будущее в контексте вертки

1. Что случится, если в данный элемент добавить еще немного текста? Предположим, на странице есть кнопка. И вы зафиксировали ей ширину (написали в CSS — width: 150px ). А если сайт будет на нескольких языках, не повлечет ли это за собой то, что добавив в кнопку еще текста — весь дизайн полетит к чертям? Потому в данном случае, например, лучше применять паддинги, а не фиксированную ширину, чтобы кнопка могла изменять размер и подстраиваться под содержимое.
2. Что случится, если в данный проект будет добавлена еще одна страница? Предположим, у нас есть одна страница — лендинг. И для удобства на тег body были повешены какие-то свойства — например фон и какие-то отступы. Что если заказчик скажет — добавь в этот проект еще одну страницу, отдельную, нам нужно там разместить информацию, чтобы было удобно давать ссылку именно на эту страницу? Вы создадите новый HTML файл, в котором тоже будет тег body . Для двух разных страниц часто подключают одну и ту же таблицу стилей, в результате чего может быть использован тот CSS файл, где для body прописан фон и другие специфические стили. Придется переделывать первую страницу, потому что, скорее всего, на второй странице такие стили нужны не будут. Соответственно, все стили лучше всего прописывать в классах, чтобы эти классы потом можн обыло использовать на любых страницах, к которым будет подключен данный файл стилей.
3. Понятны ли названия классов другому человеку? Быстро ли другой человек разберется в структуре проекта и поймет что за что отвечает и как тут что работает? Рано или поздно в проект нужно будет вносить изменения. И не факт, что это будет его создатель. Скорее всего, к этому делу будет подключен совсем другой разработчик. Или, возможно, ваш проект будет разрастаться, и у вас появится коллега. Ваша задача — максимально быстро ввести его в курс дела, чтобы он мог быстро приступить к работе. Чем более логично выстроена структура проекта и максимально понятно названы классы и написан сам код — тем быстрее он может это сделать. Или вы, например, через год захотите этот проект актуализировать. Вам самим придется потратить намного меньше времени на то, чтобы вспомнить как тут все устроено, если названия классов и структура были выбраны правильно.
4. Не много ли я дублировал кода, можно ли его оптимизировать? Если видно, что в нескольких местах одни и те же свойства дублируются, есть смысл создать для них общий класс или придумать другой способ, чтобы не повторяться в нескольких местах. Одно из главных правил программиста — don’t repeat yourself (принцип DRY).
5. Надо ли создавать класс на этом элементе? Буду ли я для него применять CSS свойства? Не нужно создавать классы для элементов, если у этих классов нет функционального назначения. Это только затрудняет ориентацию в проекте. Видишь класс — сразу кажется, что он был создан для стилизации данного элемента. Потом не находишь его в таблице стилей или в джаваскрипте — и сразу вопрос: «А смысл было его создавать?». Когда понадобится — тогда и создадим. Если же сразу прописывать массу классов, которые ничего не делают, это засоряет код и усложняет ориентацию в проекте.

results matching » «

No results matching » «

Источник

Классы в CSS– удобный путеводитель

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

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

Поэтому CSS предоставляет нам два разных определения, которые мы можем использовать — CSS классы и идентификаторы.

CSS классы — когда их использовать

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

Шаг 1 — добавить класс в HTML

Чтобы повлиять на внешний вид HTML-страницы , вы должны сначала разметить элементы с атрибутом class=»class-name» . Вот пример:

 
Контейнер 1
 
Контейнер 2
 
Контейнер 3
 

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

Давайте посмотрим, что нужно сделать в нашем CSS :

Чтобы задать правило для определенного тега с CSS классом, а не просто определить tagname < >, мы используем tagname.classname < >. Точка между tagname и classname является тем, что определяет правило как CSS класс. Также обратите внимание, что там нет пробелов. Если поставить пробел в правиле, то оно не будет работать так, как вы планировали.

В этом примере использовалось свойство margin-right:10px . Эта строка гарантирует, что между тремя контейнерами сохраняется пространство в 10 пикселей. Свойство float со значение left обеспечивает, чтобы все контейнеры размещались слева.

Такое сочетание должно дать вам что-то вроде этого:

Если вы не укажете класс

Чтобы показать вам, что ваш CSS класс изображения box применяется только там, где вы хотите, поместите дополнительный элемент после « Контейнер 3 »:

Обновите страницу. Вы увидите, что ни одно из правил, установленных в div.box <> не применяется. Потому что вы не указали значение класса.

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

Использование более чем одного класса

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

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

 
Контейнер 1
 
Контейнер 2
 
Контейнер 3
 

Расположение каскадом

Поскольку стили CSS используют каскадный порядок, вы размещаете свои классы по уровню важности. В данном случае мы хотим, чтобы класс class=»box» применялся перед class=»red» . Иначе class=»red» будет применяться до class=»box» . Надеюсь, это понятно!

div.box < height:200px; width:200px; text-align:center; font-size:14px; color:#090; background-color:#dddddd; margin-right:10px; >div.red < background-color:#ffcccc; >div.green < background-color:#ccffcc; >div.blue

Поскольку у каждого из трех контейнеров есть CSS класс .box , к ним всем применяются свойства, прописанные в div.box . Но к каждому применяется также дополнительный класс ( red , green , или blue ). Конечный результат:

Примечание: несмотря на то, что div.box определяет background-color:#cccccc ; « цветовые » классы определяются после него. Например, в box red свойство background-color , указанном в div.red , перезаписывает аналогичное свойство в div.box . Это то, что подразумевается под каскадом: в CSS логике определяется сверху вниз. А при определении классов HTML — слева направо.

CSS классы при создании макета сайта

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

• Любые изображения, которые вам захочется сделать иконками или изображением товара, придется сделать в форме квадрата: например img.thumbnail < width:200px;height:200px; >;
• Стили ссылок для кнопок должны определяться отдельно от стилей обычных ссылок. Например, a.button <> ;
• Нужно применить другой цвет при наведении курсора на ссылки в вашей навигации. Например, a.nav:hover < >a.nav: Hover <> .

Классы DR CSS; TL

Эффективное использование классов позволяет элементу страницы дать имя, которое понимает CSS . Используя эти «имена» можно применить один ряд правил для нескольких экземпляров элемента без повторного определения кода CSS .

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

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

ВЛ Виктория Лебедева автор-переводчик статьи « Using CSS Classes – A Handy Guide »

Источник