Разное

Jquery изменить css: jQuery — Работа со стилем элемента

22.06.2021

Содержание

Чтение и изменение CSS-свойств, классов и атрибутов

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

Манипулирование свойствами и атрибутами элементов

1. Добавление и удаление класса

1.1. Метод .addClass()

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

.addClass(имя класса)
имя класса — одно или больше имен класса, отделённых друг от друга пробелами.
.addClass(функция)
функция — возвращает одно или более имен класса, разделенных пробелом, которые будут добавлены к существующим. В качестве аргумента принимает индекс элемента в наборе и существующее имя класса(ов).
1.2. Метод .removeClass()

Удаляет указанное имя класса(ов) у всех элементов обернутого набора.

.removeClass(имя класса)
имя класса — необязательный параметр, одно или более имен класса, разделенных пробелом. Если имя класса не указано, метод удаляет все существующие классы у элементов набора. Если имя класса задано — удаляет только указанный класс.
.removeClass(функция)
функция — возвращает одно или более имен класса, разделенных пробелом, которые будут удалены из существующих. В качестве аргумента принимает индекс элемента в наборе и старое имя класса(ов).
1.3. Метод .toggleClass()

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

.toggleClass(имя класса)
имя класса — одно или более имен класса, разделенных пробелами, которые будут переключаться для каждого элемента набора.
.toggleClass(имя класса, логическое значение)
имя класса — одно или более имен класса, разделенных пробелами, которые будут переключаться для каждого элемента набора.
логическое значение — устанавлвает, добавить или удалить указанный класс. Значение true добавляет класс,
false — удаляет.
.toggleClass(логическое значение)
логическое значение — необязательный параметр, устанавливает, будут ли переключаться классы каждого элемента набора.
.toggleClass(функция, логическое значение)
функция — возвращает имя класса, которое будет переключаться для каждого элемента набора. В качестве аргументов получает индекс элемента в наборе и старое значение класса.
логическое значение — необязательный параметр, устанавливает, будут ли переключаться классы каждого элемента набора.
1.4. Метод .hasClass()

Проверяет наличие указанного имени класса хотя бы у одного элемента в соответствующем наборе. Возвращает

true, если хотя бы один из элементов в наборе имеет проверяемое имя класса, в противном случае — false.

.hasClass(имя класса)
имя класса — строка с именем класса для поиска.

2. Изменение атрибутов элементов

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

2.1. Метод .attr()
.attr(имя атрибута)
имя атрибута — возвращает значение атрибута первого элемента в обернутом наборе. Если атрибут отсутствует, возвращает undefined.
.attr(имя атрибута, значение)
имя атрибута — задает имя атрибута, для которого будет установлено указанное значение.
значение — строка или число, которое будет добавлено как значение атрибута для всех элементов обернутого набора.
.attr(атрибуты)
атрибуты — значения, которые копируются из свойств объекта, будут установлены для всех элементов обернутого набора.
.attr(имя атрибута, функция)
имя атрибута — задает имя атрибута, для которого будет установлено указанное значение.
функция — в качестве аргументов принимает индекс элемента в наборе и старое значение атрибута. Возвращаемое значение будет установлено в качестве значения атрибута.
2.2. Метод .removeAttr()

Удаляет указанный атрибут у каждого элемента обернутого набора.

.removeAttr(имя атрибута)
имя атрибута — строка, определяющая атрибут для удаления.

3. Изменение свойств элемента

3.1. Метод .css()

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

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

4. Получение и изменение размеров и координат элемента

4.1. Метод .width()

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

.width()
Метод вызывается без параметров. Возвращает текущее значение ширины для первого элемента в наборе без указания единицы измерения.
.width(значение)
значение — целое числовое значение или строка-значение ширины, которое будет установлено для каждого элемента набора.
.width(функция)
функция — принимает в качестве аргумента индекс элемента и старое значение свойства, возвращаемое значение будет установлено как ширина для всех элементов.
4.2. Метод .height()

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

.height()
Метод вызывается без параметров. Возвращает текущее значение высоты для первого элемента в наборе.
.height(значение)
значение — целое числовое значение или строка-значение высоты, которое будет установлено для каждого элемента набора.
.height(функция)
функция — принимает в качестве аргумента индекс элемента и старое значение свойства, возвращаемое значение будет установлено как высота для всех элементов.
4.3. Метод .innerWidth()

Возвращает ширину первого элемента в обернутом наборе с учетом отступов padding или устанавливает ее для каждого элемента обернутого набора.

.innerWidth()
Метод вызывается без параметров. Возвращает текущее значение внутренней ширины для первого элемента в наборе.
.innerWidth(значение)
значение — целое числовое значение, которое будет установлено для каждого элемента набора.
.innerWidth(функция)
функция — принимает в качестве аргумента индекс элемента и старое значение свойства, возвращаемое значение будет установлено как внутренняя ширина для всех элементов набора.
4.4. Метод .innerHeight()

Возвращает высоту первого элемента в обернутом наборе с учетом отступов padding.

.innerHeight()
Метод вызывается без параметров. Возвращает текущее значение внутренней высоты для первого элемента в наборе.
.innerHeight(значение)
значение — целое числовое значение, которое будет установлено для каждого элемента набора.
.innerHeight(функция)
функция — принимает в качестве аргумента индекс элемента и старое значение свойства, возвращаемое значение будет установлено как внутренняя ширина для всех элементов набора.
4.5. Метод .outerWidth()

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

.outerWidth(логическое значение)
логическое значение — необязательное значение, если установлено true, значение margin учитывается, в противном случае нет.
4.6. Метод .outerHeight()

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

.outerHeight(логическое значение)
логическое значение — необязательное значение, если установлено true, значение margin
учитывается, в противном случае нет.
4.7. Метод .offset()

Получает текущие координаты первого элемента или устанавливает координаты для каждого элемента. Возвращает объект JavaScript со свойствами left и top, содержащими координаты первого элемента в px обернутого набора относительно начала документа. Метод применяется только к видимым элементам.

.offset()
Метод вызывается без параметров.
4.8. Метод .position()

Возвращает объект JavaScript со свойствами left и top, содержащими координаты первого элемента в px обернутого набора относительно ближайшего родительского элемента. Метод применяется только к видимым элементам.

.position()
Метод вызывается без параметров.

Как изменить стиль всплывающего окна (PopUp)? – База знаний LPgenerator.ru

Источник изображения

Чтобы изменить внешний вид окна с формой заказа обратного звонка (PopUp), сделанного по нашему руководству, необходимо подключить стили, доступные на сайте jQuery. Как подключить стили, вам расскажет данное руководство.

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

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />

Вместо http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/ui-lightness/jquery-ui.css вписываем ссылку на любой из понравившихся стилей.

Обратите внимание! Если вы выберете стили более “старших” или “младших” версий библиотек jQuery, изменения могут не вступить в силу, т.к. версии могут конфликтовать.

Мы рекомендуем попробовать использовать одну из тем оформления PopUp формы, доступную в списке:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/base/jquery-ui.css

http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/black-tie/jquery-ui.css

http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/blitzer/jquery-ui.css

  • Небесный Купертино:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/cupertino/jquery-ui.css

http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/dark-hive/jquery-ui.css

http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/dot-luv/jquery-ui.css

http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/eggplant/jquery-ui.css

  • Летний контраст:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/excite-bike/jquery-ui.css

  • Засвеченная пленка:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/flick/jquery-ui.css

http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/hot-sneaks/jquery-ui.css

  • Дерево и слоновая кость:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/humanity/jquery-ui.css

http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/le-frog/jquery-ui.css

http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/mint-choc/jquery-ui.css

http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/overcast/jquery-ui.css

http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/pepper-grinder/jquery-ui.css

  • Небесная канцелярия:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/redmond/jquery-ui.css

http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/smoothness/jquery-ui.css

  • Кислота в колбе:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/south-street/jquery-ui.css

  • Море и водоросли:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/start/jquery-ui.css

http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/sunny/jquery-ui.css

http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/swanky-purse/jquery-ui.css

  • Виртуальность:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/trontastic/jquery-ui.css

http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/ui-darkness/jquery-ui.css

  • Светлый (стандарт):

http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/ui-lightness/jquery-ui.css

http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/vader/jquery-ui.css

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

Высоких вам конверсий и приятной работы!

С уважением,
служба технической поддержки LPgenerator.ru 

Классы | htmlbook.ru

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

Тег.Имя класса { свойство1: значение; свойство2: значение; … }

Внутри стиля вначале пишется желаемый тег, а затем, через точку пользовательское имя класса. Имена классов должны начинаться с латинского символа и могут содержать в себе символ дефиса (-) и подчеркивания (_). Использование русских букв в именах классов недопустимо. Чтобы указать в коде HTML, что тег используется с определённым классом, к тегу добавляется атрибут (пример 8.1).

Пример 8.1. Использование классов

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Классы</title>
  <style>
   P { /* Обычный абзац */ 
    text-align: justify; /* Выравнивание текста по ширине */
   } 
   P.cite { /* Абзац с классом cite */
    color: navy; /* Цвет текста */
    margin-left: 20px; /* Отступ слева */
    border-left: 1px solid navy; /* Граница слева от текста */
    padding-left: 15px; /* Расстояние от линии до текста */
   } 
  </style>
 </head> 
 <body>
  <p>Для искусственного освещения помещения применяются люминесцентные лампы. 
     Они отличаются высокой световой отдачей, продолжительным сроком службы, 
     малой яркостью светящейся поверхности, близким к естественному спектральным 
     составом излучаемого света, что обеспечивает хорошую цветопередачу.</p>
  <p>Для исключения засветки экрана дисплея световыми потоками 
     оконные проемы снабжены светорассеивающими шторами.</p>
 </body>
</html>

Результат данного примера показан на рис. 8.1.

Рис. 8.1. Вид текста, оформленного с помощью стилевых классов

Первый абзац выровнен по ширине с текстом чёрного цвета (этот цвет задаётся браузером по умолчанию), а следующий, к которому применен класс с именем cite — отображается синим цветом и с линией слева.

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

.Имя класса { свойство1: значение; свойство2: значение; … }

При такой записи класс можно применять к любому тегу (пример 8.2).

Пример 8.2. Использование классов

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Классы</title>
  <style>
   .gost {
    color: green; /* Цвет текста */
    font-weight: bold; /* Жирное начертание */
   }
   .term {
    border-bottom: 1px dashed red; /* Подчеркивание под текстом */
   }
  </style>
 </head> 
 <body>
   <p>Согласно <span>ГОСТ 12.1.003-83 ССБТ &quot;Шум. Общие 
      требования безопасности&quot;</span>, шумовой характеристикой рабочих 
      мест при постоянном шуме являются уровни звуковых давлений в децибелах 
      в октавных полосах. Совокупность таких уровней называется 
      <b>предельным спектром</b>, номер которого численно равен 
      уровню звукового давления в октавной полосе со среднегеометрической 
      частотой 1000&nbsp;Гц.
   </p>
 </body>
</html>

Результат применения классов к тегам <span> и <b> показан на рис. 8.2.

Рис. 8.2. Вид тегов, оформленных с помощью классов

Классы удобно использовать, когда нужно применить стиль к разным элементам веб-страницы: ячейкам таблицы, ссылкам, абзацам и др. В примере 8.3 показано изменение цвета фона строк таблицы для создания «зебры».

Пример 8.3. Использование классов

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Камни</title>
  <style>
   table.jewel {
    width: 100%; /* Ширина таблицы */
    border: 1px solid #666; /* Рамка вокруг таблицы */
   }
   th {
    background: #009383; /* Цвет фона */
    color: #fff; /* Цвет текста */
    text-align: left; /* Выравнивание по левому краю */
   }
   tr.odd {
    background: #ebd3d7; /* Цвет фона */
   }
  </style>
 </head>
 <body>
  <table>
   <tr>
    <th>Название</th><th>Цвет</th><th>Твердость по Моосу</th>
   </tr>
   <tr>
    <td>Алмаз</td><td>Белый</td><td>10</td>
   </tr>
   <tr>
    <td>Рубин</td><td>Красный</td><td>9</td>
   </tr>
   <tr>
    <td>Аметист</td><td>Голубой</td><td>7</td>
   </tr>
   <tr>
    <td>Изумруд</td><td>Зеленый</td><td>8</td>
   </tr>
   <tr>
    <td>Сапфир</td><td>Голубой</td><td>9</td>
   </tr>
  </table>
 </body>
</html>

Результат данного примера показан на рис. 8.3. В примере класс с именем odd используется для изменения цвета фона строки таблицы. За счёт того, что этот класс добавляется не ко всем тегам <tr> и получается чередование разных цветов.

Рис. 8.3. Результат применения классов

Одновременное использование разных классов

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

В примере 8.4 показано использование разных классов для создания облака тегов.

Пример 8.4. Сочетание разных классов

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Облако тегов</title>
  <style type="text/css">
   .level1 { font-size: 1em; }
   .level2 { font-size: 1.2em; }
   .level3 { font-size: 1.4em; }
   .level4 { font-size: 1.6em; }
   .level5 { font-size: 1.8em; }
   .level6 { font-size: 2em; }
   A.tag { 
    color: #468be1; /* Цвет ссылок */ 
   }
  </style>
 </head> 
 <body>
  <div> 
   <a href="/term/2">Paint.NET</a> 
   <a href="/term/69">Photoshop</a> 
   <a href="/term/3">цвет</a> 
   <a href="/term/95">фон</a> 
   <a href="/term/11">палитра</a> 
   <a href="/term/43">слои</a> 
   <a href="/term/97">свет</a> 
   <a href="/term/44">панели</a> 
   <a href="/term/16">линия</a> 
   <a href="/term/33">прямоугольник</a> 
   <a href="/term/14">пиксел</a> 
   <a href="/term/27">градиент</a> 
  </div>
 </body>
</html>

Результат данного примера показан на рис. 8.4.

Рис. 8.4. Облако тегов

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

Вопросы для проверки

1. Какое имя класса написано правильно?

  1. 2layer1
  2. 1layer
  3. Яndex
  4. pink-floyd
  5. 28_days_later

2. Какой цвет будет у слова «потока» в коде?

<p>Коэффициент использования излучаемого светильниками <span>потока</span>, на расчетной плоскости.</p>

При использовании следующего стиля?

BODY { color: red; }
P { color: green; }
.c1 {color: blue; }
.c2 { color: yellow; }
.c3 { color: orange; }
.c2.c3 { color: black; }

  1. Зелёный.
  2. Синий.
  3. Жёлтый.
  4. Оранжевый.
  5. Чёрный.

3. Как задать стиль у тега <div>DOOM</div>?

  1. div[iddqd] { color: red; }
  2. div.iddqd { color: red; }
  3. iddqd.div { color: red; }
  4. div#iddqd { color: red; }
  5. div=iddqd { color: red; }

4. Какое имя класса следует добавить к тегу <P>, чтобы текст был одновременно жирным и красного цвета, если имеется следующий стиль?

 s1 { color: red; font-weight: bold; }
.s2 { color: red; }
.s3 { background-color: red; font-weight: bold; }
.s4 { font-weight: bold; }
.s5 { font: red bold; }

  1. s1
  2. s2
  3. s3
  4. s2 s4
  5. s5

Ответы

1. pink-floyd

2. Чёрный.

3. div.iddqd { color: red; }

4. s2 s4

FAQ / Методология / БЭМ

Возникли вопросы по БЭМ? Мы поможем быстро найти ответы.

Почему БЭМ?

Блоки и элементы

Модификаторы и миксы

CSS

JavaScript

  • Зачем нужен i-bem.js, если есть jQuery?

У меня другой вопрос

Если вы не нашли ответ на свой вопрос, свяжитесь с нами на форуме.

В чем отличие БЭМ от OOCSS, AMCSS, SMACSS, SUITCSS?

  • БЭМ работает не только с CSS, но и с JavaScript.

  • БЭМ больше схож с Web Components, чем с перечисленными решениями для CSS.

  • БЭМ предоставляет комплексное решение по созданию архитектуры проекта и помогает организовать процессы разработки.

    Подробнее читайте в разделе Применение методологии для решения задач веб-разработки.

В чем разница между БЭМ и Web Components?

Поддержка браузеров

  • Web Components не поддерживается в Safari, iOS Safari, Internet Explorer, Firefox.

  • БЭМ работает во всех браузерах.

Инкапсуляция

  • В Web Components реализована через Shadow DOM.

  • В БЭМ — с помощью элементов блока.

Работа шаблонов

  • В Web Components шаблоны всегда выполняются в браузере. Это может потребовать дополнительных решений проблем с индексацией.

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

  • Web Components использует императивный принцип — интерполяцию строк.

  • БЭМ использует декларативный подход, который позволяет гибко управлять шаблонизацией и избегать повторений.

Вместо импорта HTML — сборка

  • Web Components использует импорт HTML, который работает непосредственно в браузере. Для объединения HTML-файлов используется инструмент Vulcanize.

  • В БЭМ используется сборка. Для объединения файлов используются сборщики: ENB, Gulp.

Вместо Custom Elements — абстракция над DOM-деревом

  • В Web Components используются Custom Elements. Такой подход позволяет разместить на одном DOM-узле только один компонент.

  • В БЭМ используется БЭМ-дерево. Такой подход позволяет размещать на одном DOM-узле несколько компонентов (БЭМ-сущностей).

    Подробнее читайте в разделе про миксы.

Полезен ли БЭМ в маленьких проектах?

Методология БЭМ предоставляет правила организации веб-проектов, независимо от их размера или количества разработчиков в команде. Даже если в вашей команде два человека и вы верстаете одностраничные сайты, БЭМ позволяет:

  • Повторно использовать верстку

    • Небольшие однотипные проекты могут иметь похожую структуру. Например, посадочные страницы (landing) — разные снаружи, одинаковые внутри. Для их создания можно использовать готовые шаблоны.

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

  • Быстро прототипировать верстку

    • Прототип сайта создается из блоков. Вместо верстки в БЭМ-проекте вы сразу проектируете интерфейс из готовых блоков.

  • Ускорить разработку

    • Уровни переопределения позволяют подключать библиотеки и доопределять блоки, не зависеть от обновлений библиотеки.

    • БЭМ-проект можно быстро начать с шаблонного проекта project-stub или bem-express.

  • Не зависеть от конкретного разработчика

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

  • Ускорить рефакторинг

    • БЭМ-проект устроен таким образом, что изменения в одном блоке можно применить ко всем блокам в проекте. При этом нет необходимости знать все возможные случаи использования этого блока.

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

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

  • Минифицировать CSS/JS даже в одностраничном проекте.

В чем разница между БЭМ и Bootstrap?

Bootstrap — это свободный набор сверстанных блоков для создания сайтов и веб-приложений.

БЭМ — это методология, позволяющая:

  • создавать архитектуру проекта;

  • разрабатывать веб-приложения независимыми блоками;

  • упрощать поддержку проектов.

Также существует ряд библиотек с открытым исходным кодом:

  • bem-components — библиотека блоков, содержащая контролы форм и другие базовые компоненты веб-интерфейса;

  • bem-core — библиотека блоков, предоставляющая специализированный JavaScript-фреймворк для веб-разработки.

  • bem-history — БЭМ-обертка над History API.

Когда создавать блок, когда — элемент?

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

Как изменить внешний вид блока?

Внешний вид блока можно изменить при помощи модификаторов или миксов.

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

Если существует вероятность переиспользовать блок в данном оформлении.

Используйте миксы

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

Подробнее про применение миксов и модификаторов читайте в разделе Когда создавать модификатор, когда — микс?.

Зачем в именах модификаторов и элементов указывать имя блока?

Имя блока в именах модификаторов и элементов:

  • Обеспечивает пространство имен.

    Это позволяет ограничить влияние элементов и модификаторов одного блока на другой.

    Пример

    <div>...</div>
<div>...</div>

  • Позволяет использовать миксы.

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

    Пример

    <div>...</div>

  • Облегчает поиск в коде.

    Уникальные имена облегчают поиск сущностей в коде и файловой структуре.

Зачем создавать отдельные директории и файлы для каждого блока и технологии?

Для удобства разработки и поддержки проекта файловую структуру БЭМ-проекта разделяют на вложенные директории и файлы.

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

Наследуют ли элементы блока его CSS-свойства?

Да. Механизм наследования CSS-свойств в БЭМ ничем не отличается от привычного наследования.

Чтобы одинаково оформить все элементы блока, целесообразно задать CSS-правила непосредственно блоку.

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

Почему не стоит создавать блоки-обертки?

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

Подробнее читайте в разделе HTML по БЭМ.

Почему не стоит создавать элементы элементов (block__elem1__elem2)?

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

Подробнее читайте в разделе Быстрый старт.

Когда создавать модификатор, когда — микс?

Создавайте модификатор

Если нужная вам реализация может использоваться повторно и не зависит от реализации других компонентов страницы. Например, блок select имеет модификаторы: hovered, pressed, disabled, focused, opened.

Создавайте микс

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

Например, в большинстве случаев создается микс, если:

  • реализуется определенная бизнес-логика проекта;

  • задается внешняя геометрия для данного окружения.

Когда создавать булевый модификатор, когда — модификатор «ключ-значение»?

Создавайте булевый модификатор

Если важно только наличие или отсутствие модификатора у блока, а его значение несущественно. Например, модификатор, описывающий состояние «отключен»: disabled.

Пример

<div>...</div>

Создавайте модификатор вида «ключ-значение»

Если состояний у блока может быть несколько. Например, для описания размеров блока можно использовать модификатор size с допустимыми значениями s, m и l.

Пример

<div>...</div>
<div>...</div>

Как выбрать имя модификатора?

Выбирайте имена модификаторов, опираясь на семантику, а не на описываемые им CSS-свойства.

Пример

<button>...</button>

<button>...</button>

Имя модификатора button_background_yellow неудачное, потому что:

  • При изменении фона с желтого (yellow), например, на красный (red) придется менять не только CSS-код, но и название селектора, шаблоны и, вполне вероятно, JavaScript-код.

  • При добавлении других CSS-свойств, например, border, line-height, имя модификатора перестанет соответствовать его содержанию.

Как сделать глобальные модификаторы для блоков?

В БЭМ отсутствует понятие глобальных модификаторов, так как имя любого модификатора содержит имя блока или элемента.

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

Подробнее читайте в разделе Стилизация групп блоков.

Почему нельзя писать имя модификатора блока в имени элемента (block_mod__elem)?

Элемент — составная часть блока, а не модификатора блока. Таким образом, только имя блока может задавать пространство имен для элементов.

Это важно, потому что:

  • Блок может иметь много модификаторов.

    Пример

    <div>
    <div>...</div>
</div>

  • Модификатор определяет состояние блока/элемента, которое может быть изменено во время выполнения скрипта JavaScript.

Как адаптировать сайт к различным устройствам?

Существует несколько способов изменять разметку страницы на основе ширины окна браузера:

  • используя Media Queries;

  • переключая модификаторы.

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

Media Queries

Файловая структура:

common.blocks/
    button/
        button.css    # CSS-реализация кнопки

CSS-реализация:

@media (max-width: 767px) {
    .button {
          left: 0;
    }
}

@media (max-width: 479px) {
    .button {
        right: 0;
    }
}

Примечание Имена блоков должны быть достаточно общими, для того чтобы его можно было использовать более чем с одной целью. Не стоит называть блок sidebar-left, если при изменении ширины экрана, его позиция изменится на right.

Переключение модификатора

Файловая структура:

common.blocks/
    button/
        _position/
            button_position_left.css
            button_position_right.css
        button.js                         # JS-реализация кнопки

button_position_left.css:

.button_position_left {
    left: 0;
}

button_position_right.css:

.button_position_right {
    right: 0;
}

Изменение CSS-классов на DOM-узле происходит при помощи JavaScript.

Подробнее читайте в разделе Переключение модификаторов.

Можно ли совмещать теги и классы в селекторе?

Совмещение тега и класса в селекторе повышает специфичность CSS-правил. Методология БЭМ не рекомендует совмещать теги и классы в селекторе.

Подробнее читайте в разделе Совмещение тега и класса в селекторе.

Можно ли использовать вложенные селекторы?

Вложенные селекторы увеличивают связанность кода и делают его повторное использование невозможным. Методология БЭМ допускает использование таких селекторов, но рекомендует свести их к минимуму.

Подробнее читайте в разделе Вложенные селекторы.

Можно ли использовать комбинированные селекторы?

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

Подробнее читайте в разделе Комбинированные селекторы.

Можно ли использовать селекторы по пользовательским тегам?

В HTML блоки могут выражаться с помощью пользовательских HTML-элементов (Custom Elements) с целью:

  • улучшить структуру веб-страницы и добавить смысловое значение заключенному в них содержимому;

  • использовать селекторы по пользовательским тегам вместо селекторов по классам;

  • связать с HTML-элементом дополнительные данные, с которыми потом будет работать JavaScript.

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

Пример

HTML-реализация:

<icon-twitter>...</icon-twitter>

CSS-реализация:

icon-twitter {}
.icon_social_twitter {}

В таком подходе существует ряд ограничений:

  • невозможно использовать миксы;

  • не любой блок можно выразить пользовательским HTML-элементом. Например, для всех ссылок необходим тег <a>, а для полей — <input>.

Почему не стоит делать общий сброс стилей (reset)?

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

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

Почему не стоит писать block_mod вместо block block_mod?

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

Модификатор определяет состояние блока/элемента, которое может быть изменено во время выполнения скрипта JavaScript. Таким образом, копировать базовые CSS-свойства блока придется во все его модификаторы.

Пример

<div>
    <div>...</div>
</div>

Примечание. Совмещение нескольких модификаторов на одном и том же DOM-узле приведет к дублированию кода, реализующего базовую функциональность (логику и стили) блока.

В каких случаях следует создавать вспомогательные блоки?

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

Примером вспомогательного блока в bem-core может служить блок clearfix, а в bem-components — z-index-group.

Зачем внешнюю геометрию и позиционирование задавать через родительский блок?

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

Подробнее читайте в разделе Внешняя геометрия и позиционирование

Зачем нужен i-bem.js, если есть jQuery?

i-bem.js не предназначен для замены фреймворка общего назначения, такого как jQuery.

i-bem.js позволяет:

  • разрабатывать веб-интерфейс в терминах блоков, элементов, модификаторов;

  • интегрировать JavaScript-код с шаблонами и CSS-правилами в стиле БЭМ;

  • описывать логику работы блока как набор состояний.

Main Academy — Академия современных профессий

Владимир Мирошниченко

Закончил курс «Основы программирования», тренер Вячеслав Полиновский. Долго решался, не мог выбрать направление, сомневался. Но этот курс все расставил «по полочкам», я увидел, что программирование — это совсем не сложно, а даже очень интересно. Еще в процессе обучения уже записался на следующий курс. Отдельное спасибо тренеру Вячеславу за интересную подачу материала и много практических заданий, которые позволили вживую увидеть результат своих действий, что очень мотивировало и помогало обучению. Рекомендую.

Андрей Рублёв

Прошёл курс по Java, все понравилось, доступно материал подавался тренером , очень много времени уходило также и на самообучение. Сейчас уже работаю программистом. Советую!

Никита Ильченко

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

Руслан Крылов

Только вот закончил курс «Основы программирования». Занятия проходят очень интересно, здесь не просто выкладывают тонны чистой теории, эта теория подкреплена практическим опытом преподавателя, который постоянно рассказывает разные «плюшки», интересности и финты». Курс понятен даже для человека, который компьютерными технологиями особо и не пользовался. Эти 3 недели сильно меня вдохновили на продолжение обучения

Артем Гуць

Закончил курс QA. Очень доволен, тренер Денис доступно и интересно доносил информацию, прикрепляя её интересными практическими заданиями и делясь богатым личным опытом. Спасибо!

Аня Шушпанова

Проходила курс по Front End , целью обучения было сделать свой сайт и запустить собственный маленький бизнес. Все получилось , спасибо преподавателю за знания и терпения)

Владислав Сахно

Очень хорошие и отзывчивые тренера!) Очень порадовало отношение администрации, приветливые, помогут и подскажут в каких либо вопросах) и конечно же интерьер и атмосфера 10 из 10 !)) Всем советую, обучают качественно и не дорого!)

Маша Савина

Замечательный курс Основы программирования хоть и длился 3 недели, но за это время я научилась очень много. Приятная атмосфера, побуждает к работе, постоянная мотивация от преподавателя, много суперполезны практических задач. Мне все понравилось 🙂

Михаил Оздемир

Участвовал в вебинаре по направлению Java, очень понравился тренер Александр. Объяснил на пальцах все преимущества, тонкости и сложности. Очень понравилось, буду в дальнейшем следить за новостями академии) Спасибо за вебинар)

Антон Сердюченко

Я не рассчитывал на почти два часа вебинара, но было реально интересно. Всегда думал, что тестирование само по себе очень простое:) А как оказалось, есть много нюансов. Тем интереснее! Спасибо!

Александр Боскин

Мне есть трошки годков. Пока прошел только курс «Основы программирования». Учиться нужно у тех, кто заинтересован отдавать даже почти пенсионерам. «Маin Academy» — то, что Вам нужно для путевки в IT, не теряйте время,учитесь, работайте и зарабатывайте !

Алла Левчук

Учусь на курсе java script. Материал изложен качественно и понятно, квалифицированные преподаватели, много практики. Училась в других академиях и есть с чем сравнивать, курсы в Main Academy на порядок лучше. Радует также приятная атмосфера в академии. рекомендую

Alexander Peresta

Пройшов курс FrontEnd Developer та був надзвичайно задоволеним проведеним тут часом. Викладач був дуже хороший, зумів не лише показати матеріал а й навчив думати як треба. Дуже радий, що за відносно короткий час зумів познайомитись з великим обсягом інформації та знайти задоволення у цій роботі. Дуже дякую Академії за цей шанс почати нове життя!

Анастасия Ткаченко

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

Aleksandr Nedostup

Академия дает очень хорошую базу будущим программистам. Все остальное зависит только от Вас! Впечатления о компании, тренере остались только положительные. Спасибо Main Academy за бесценный опыт:)

5 демонстраций jQuery для добавления, изменения, удаления CSS для div, меню, таблицы и др.

Метод jQuery для установки свойств CSS

CSS-свойства элементов на веб-странице могут быть добавлены, изменены и удалены (во время выполнения) с помощью метода jQuery css.

$ .css также можно использовать для получения свойств CSS первого совпадающего элемента в DOM.

Я покажу вам несколько демонстраций использования метода $ .css jQuery в div, меню, HTML-таблице, списке, аккордеоне и панели навигации Bootstrap — так что продолжайте читать.

Синтаксис метода $ .css

Чтобы установить отдельное свойство CSS (добавить или изменить):

$ («селектор»). Css («CSSpropertyName», «PropertyValue»)


Для настройки нескольких свойств за один звонок:

$ («селектор»).css ({«граница»: «пунктирная 2px # eee681», «font-size»: «24px», «color»: «# eee»});

});


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

Начиная с простого div для изменения CSS

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