diff --git a/changelog_unreleased/html/7865.md b/changelog_unreleased/html/7865.md
new file mode 100644
index 000000000..95a225f04
--- /dev/null
+++ b/changelog_unreleased/html/7865.md
@@ -0,0 +1,22 @@
+#### Prefix-based multiline formatting for the `class` attribute (#7865 by @thorn0)
+
+Formatting of HTML class names will now keep classes on one line until the line length limit is reached; at that point, consecutive classes with the same prefix will be grouped together on each line. For layout frameworks such as Bootstrap and Tailwind CSS, which add many classes to an element, this is important for readability and maintainability vs. the previous behavior (keeping all classes on one line) or e.g. putting each class on its own line.
+
+<!-- prettier-ignore -->
+```html
+<!-- Prettier stable -->
+<div
+  class="SomeComponent__heading-row d-flex flex-column flex-lg-row justify-content-start justify-content-lg-between align-items-start align-items-lg-center"
+></div>
+
+<!-- Prettier master -->
+<div
+  class="
+    SomeComponent__heading-row
+    d-flex
+    flex-column flex-lg-row
+    justify-content-start justify-content-lg-between
+    align-items-start align-items-lg-center
+  "
+></div>
+```
diff --git a/src/language-html/syntax-attribute.js b/src/language-html/syntax-attribute.js
index bc2802a32..3180ae3b2 100644
--- a/src/language-html/syntax-attribute.js
+++ b/src/language-html/syntax-attribute.js
@@ -2,7 +2,7 @@
 
 const parseSrcset = require("parse-srcset");
 const {
-  builders: { ifBreak, join, line },
+  builders: { group, ifBreak, indent, join, line, softline },
 } = require("../document");
 
 function printImgSrcset(value) {
@@ -59,8 +59,50 @@ function printImgSrcset(value) {
   );
 }
 
+const prefixDelimiters = ["__", "--", "_", "-"];
+
+function getClassPrefix(className) {
+  const startIndex = className.search(/[^_-]/);
+  if (startIndex !== -1) {
+    for (const delimiter of prefixDelimiters) {
+      const delimiterIndex = className.indexOf(delimiter, startIndex);
+      if (delimiterIndex !== -1) {
+        return className.slice(0, delimiterIndex);
+      }
+    }
+  }
+  return className;
+}
+
 function printClassNames(value) {
-  return value.trim().split(/\s+/).join(" ");
+  const classNames = value.trim().split(/\s+/);
+
+  // Try keeping consecutive classes with the same prefix on one line.
+  const groupedByPrefix = [];
+  let previousPrefix;
+  for (let i = 0; i < classNames.length; i++) {
+    const prefix = getClassPrefix(classNames[i]);
+    if (
+      prefix !== previousPrefix &&
+      // "home-link" and "home-link_blue_yes" should be considered same-prefix
+      prefix !== classNames[i - 1]
+    ) {
+      groupedByPrefix.push([]);
+    }
+    groupedByPrefix[groupedByPrefix.length - 1].push(classNames[i]);
+    previousPrefix = prefix;
+  }
+
+  return [
+    indent([
+      softline,
+      join(
+        line,
+        groupedByPrefix.map((classNames) => group(join(line, classNames)))
+      ),
+    ]),
+    softline,
+  ];
 }
 
 module.exports = {
diff --git a/tests/angular/angular/__snapshots__/jsfmt.spec.js.snap b/tests/angular/angular/__snapshots__/jsfmt.spec.js.snap
index 2eb34a77d..437a6d4fb 100644
--- a/tests/angular/angular/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/angular/angular/__snapshots__/jsfmt.spec.js.snap
@@ -110,7 +110,9 @@ printWidth: 1
 </div>
 
 <div
-  class="common--error-message"
+  class="
+    common--error-message
+  "
   test-hook="upper-error-message"
   ng-if="
     !$ctrl.showsFormBelowPlain() &&
@@ -3468,7 +3470,16 @@ printWidth: 1
   }}
 </label>
 <div
-  class="Nemo possimus non voluptates dicta accusamus id quia"
+  class="
+    Nemo
+    possimus
+    non
+    voluptates
+    dicta
+    accusamus
+    id
+    quia
+  "
 >
   {{
     copyTypes[
@@ -8051,7 +8062,9 @@ can be found in the LICENSE file at http://angular.io/license
 </p>
 
 <a
-  class="to-toc"
+  class="
+    to-toc
+  "
   href="#toc"
   >top</a
 >
@@ -8072,7 +8085,9 @@ can be found in the LICENSE file at http://angular.io/license
   [hidden]="isUnchanged")
 </p>
 <div
-  class="context"
+  class="
+    context
+  "
 >
   {{
     title
@@ -8119,7 +8134,9 @@ can be found in the LICENSE file at http://angular.io/license
   (keyup)="
     (0)
   "
-  class="context"
+  class="
+    context
+  "
 >
   Type
   something:
@@ -8132,7 +8149,9 @@ can be found in the LICENSE file at http://angular.io/license
 </div>
 
 <a
-  class="to-toc"
+  class="
+    to-toc
+  "
   href="#toc"
   >top</a
 >
@@ -8154,7 +8173,9 @@ can be found in the LICENSE file at http://angular.io/license
   )
 </p>
 <div
-  class="context"
+  class="
+    context
+  "
 >
   <button
     (click)="
@@ -8173,7 +8194,9 @@ can be found in the LICENSE file at http://angular.io/license
   context
 </p>
 <div
-  class="context"
+  class="
+    context
+  "
 >
   <button
     (click)="
@@ -8197,7 +8220,9 @@ can be found in the LICENSE file at http://angular.io/license
 </p>
 <!-- template hides the following; plenty of examples later -->
 <div
-  class="context"
+  class="
+    context
+  "
 >
   <button
     *ngFor="
@@ -8224,7 +8249,9 @@ can be found in the LICENSE file at http://angular.io/license
   (#heroForm)
 </p>
 <div
-  class="context"
+  class="
+    context
+  "
 >
   <form
     #heroForm
@@ -8239,7 +8266,9 @@ can be found in the LICENSE file at http://angular.io/license
 </div>
 
 <a
-  class="to-toc"
+  class="
+    to-toc
+  "
   href="#toc"
   >top</a
 >
@@ -8257,7 +8286,9 @@ can be found in the LICENSE file at http://angular.io/license
 <!--<img src="http://www.wpclipart.com/cartoon/people/hero/hero_silhoutte_T.png">-->
 <!-- Public Domain terms of use: http://www.wpclipart.com/terms.html -->
 <div
-  class="special"
+  class="
+    special
+  "
 >
   Mental
   Model
@@ -8275,7 +8306,9 @@ can be found in the LICENSE file at http://angular.io/license
 <div>
   <!-- Normal HTML -->
   <div
-    class="special"
+    class="
+      special
+    "
   >
     Mental
     Model
@@ -8385,7 +8418,9 @@ can be found in the LICENSE file at http://angular.io/license
 </button>
 
 <a
-  class="to-toc"
+  class="
+    to-toc
+  "
   href="#toc"
   >top</a
 >
@@ -8428,7 +8463,9 @@ can be found in the LICENSE file at http://angular.io/license
 />
 
 <a
-  class="to-toc"
+  class="
+    to-toc
+  "
   href="#toc"
   >top</a
 >
@@ -8505,7 +8542,9 @@ can be found in the LICENSE file at http://angular.io/license
 </button>
 
 <a
-  class="to-toc"
+  class="
+    to-toc
+  "
   href="#toc"
   >top</a
 >
@@ -8667,7 +8706,9 @@ can be found in the LICENSE file at http://angular.io/license
 </p>
 
 <a
-  class="to-toc"
+  class="
+    to-toc
+  "
   href="#toc"
   >top</a
 >
@@ -8761,7 +8802,9 @@ can be found in the LICENSE file at http://angular.io/license
 </div>
 
 <a
-  class="to-toc"
+  class="
+    to-toc
+  "
   href="#toc"
   >top</a
 >
@@ -8777,7 +8820,11 @@ can be found in the LICENSE file at http://angular.io/license
 
 <!-- standard class attribute setting  -->
 <div
-  class="bad curly special"
+  class="
+    bad
+    curly
+    special
+  "
 >
   Bad
   curly
@@ -8786,7 +8833,11 @@ can be found in the LICENSE file at http://angular.io/license
 
 <!-- reset/override all class names with a binding  -->
 <div
-  class="bad curly special"
+  class="
+    bad
+    curly
+    special
+  "
   [class]="
     badCurly
   "
@@ -8810,7 +8861,9 @@ can be found in the LICENSE file at http://angular.io/license
 
 <!-- binding to \`class.special\` trumps the class attribute -->
 <div
-  class="special"
+  class="
+    special
+  "
   [class.special]="
     !isSpecial
   "
@@ -8837,7 +8890,9 @@ can be found in the LICENSE file at http://angular.io/license
 </div>
 
 <a
-  class="to-toc"
+  class="
+    to-toc
+  "
   href="#toc"
   >top</a
 >
@@ -8890,7 +8945,9 @@ can be found in the LICENSE file at http://angular.io/license
 </button>
 
 <a
-  class="to-toc"
+  class="
+    to-toc
+  "
   href="#toc"
   >top</a
 >
@@ -8964,7 +9021,9 @@ can be found in the LICENSE file at http://angular.io/license
 </app-big-hero-detail>
 
 <div
-  class="parent-div"
+  class="
+    parent-div
+  "
   (click)="
     onClickMe(
       $event
@@ -8975,7 +9034,9 @@ can be found in the LICENSE file at http://angular.io/license
   Click
   me
   <div
-    class="child-div"
+    class="
+      child-div
+    "
   >
     Click
     me
@@ -9022,7 +9083,9 @@ can be found in the LICENSE file at http://angular.io/license
 </div>
 
 <a
-  class="to-toc"
+  class="
+    to-toc
+  "
   href="#toc"
   >top</a
 >
@@ -9079,7 +9142,9 @@ can be found in the LICENSE file at http://angular.io/license
 </div>
 
 <a
-  class="to-toc"
+  class="
+    to-toc
+  "
   href="#toc"
   >top</a
 >
@@ -9151,7 +9216,9 @@ bindon-ngModel
 (ngModelChange)="setUppercaseName($event)"
 
 <a
-  class="to-toc"
+  class="
+    to-toc
+  "
   href="#toc"
   >top</a
 >
@@ -9275,7 +9342,11 @@ bindon-ngModel
 </div>
 
 <div
-  class="bad curly special"
+  class="
+    bad
+    curly
+    special
+  "
 >
   Bad
   curly
@@ -9293,7 +9364,9 @@ bindon-ngModel
 </div>
 
 <a
-  class="to-toc"
+  class="
+    to-toc
+  "
   href="#toc"
   >top</a
 >
@@ -9426,7 +9499,9 @@ bindon-ngModel
 </div>
 
 <a
-  class="to-toc"
+  class="
+    to-toc
+  "
   href="#toc"
   >top</a
 >
@@ -9554,7 +9629,9 @@ bindon-ngModel
 </div>
 
 <a
-  class="to-toc"
+  class="
+    to-toc
+  "
   href="#toc"
   >top</a
 >
@@ -9569,7 +9646,9 @@ bindon-ngModel
 </h2>
 
 <div
-  class="box"
+  class="
+    box
+  "
 >
   <div
     *ngFor="
@@ -9584,7 +9663,9 @@ bindon-ngModel
 <br />
 
 <div
-  class="box"
+  class="
+    box
+  "
 >
   <!-- *ngFor w/ hero-detail Component -->
   <app-hero-detail
@@ -9598,7 +9679,9 @@ bindon-ngModel
 </div>
 
 <a
-  class="to-toc"
+  class="
+    to-toc
+  "
   href="#toc"
   >top</a
 >
@@ -9618,7 +9701,9 @@ bindon-ngModel
   separator
 </p>
 <div
-  class="box"
+  class="
+    box
+  "
 >
   <div
     *ngFor="
@@ -9645,7 +9730,9 @@ bindon-ngModel
   separator
 </p>
 <div
-  class="box"
+  class="
+    box
+  "
 >
   <!-- Ex: "1 - Hercules" -->
   <div
@@ -9666,7 +9753,9 @@ bindon-ngModel
 </div>
 
 <a
-  class="to-toc"
+  class="
+    to-toc
+  "
   href="#toc"
   >top</a
 >
@@ -9709,7 +9798,9 @@ bindon-ngModel
   trackBy
 </p>
 <div
-  class="box"
+  class="
+    box
+  "
 >
   <div
     #noTrackBy
@@ -9748,7 +9839,9 @@ bindon-ngModel
   trackBy
 </p>
 <div
-  class="box"
+  class="
+    box
+  "
 >
   <div
     #withTrackBy
@@ -9795,7 +9888,9 @@ bindon-ngModel
   separator
 </p>
 <div
-  class="box"
+  class="
+    box
+  "
 >
   <div
     *ngFor="
@@ -9822,7 +9917,9 @@ bindon-ngModel
   separator
 </p>
 <div
-  class="box"
+  class="
+    box
+  "
 >
   <div
     *ngFor="
@@ -9849,7 +9946,9 @@ bindon-ngModel
   separator
 </p>
 <div
-  class="box"
+  class="
+    box
+  "
 >
   <div
     *ngFor="
@@ -9875,7 +9974,9 @@ bindon-ngModel
   function
 </p>
 <div
-  class="box"
+  class="
+    box
+  "
 >
   <div
     *ngFor="
@@ -9893,7 +9994,9 @@ bindon-ngModel
 </div>
 
 <a
-  class="to-toc"
+  class="
+    to-toc
+  "
   href="#toc"
   >top</a
 >
@@ -9986,7 +10089,9 @@ bindon-ngModel
 </div>
 
 <a
-  class="to-toc"
+  class="
+    to-toc
+  "
   href="#toc"
   >top</a
 >
@@ -10054,7 +10159,9 @@ bindon-ngModel
 ></app-hero-form>
 
 <a
-  class="to-toc"
+  class="
+    to-toc
+  "
   href="#toc"
   >top</a
 >
@@ -10107,7 +10214,9 @@ bindon-ngModel
 }}
 
 <a
-  class="to-toc"
+  class="
+    to-toc
+  "
   href="#toc"
   >top</a
 >
@@ -10185,7 +10294,9 @@ bindon-ngModel
 </div>
 
 <a
-  class="to-toc"
+  class="
+    to-toc
+  "
   href="#toc"
   >top</a
 >
@@ -10282,7 +10393,9 @@ See console log:
 </div>
 
 <a
-  class="to-toc"
+  class="
+    to-toc
+  "
   href="#toc"
   >top</a
 >
@@ -10319,7 +10432,9 @@ See console log:
 </div>
 
 <a
-  class="to-toc"
+  class="
+    to-toc
+  "
   href="#toc"
   >top</a
 >
@@ -10371,7 +10486,9 @@ See console log:
 </div>
 
 <a
-  class="to-toc"
+  class="
+    to-toc
+  "
   href="#toc"
   >top</a
 >
@@ -10433,7 +10550,9 @@ See console log:
 </p>
 
 <a
-  class="to-toc"
+  class="
+    to-toc
+  "
   href="#toc"
   >top</a
 >
@@ -10456,13 +10575,17 @@ can be found in the LICENSE file at http://angular.io/license
     #heroForm="ngForm"
   >
     <div
-      class="form-group"
+      class="
+        form-group
+      "
     >
       <label
         for="name"
         >Name
         <input
-          class="form-control"
+          class="
+            form-control
+          "
           name="name"
           required
           [(ngModel)]="
diff --git a/tests/html/attributes/__snapshots__/jsfmt.spec.js.snap b/tests/html/attributes/__snapshots__/jsfmt.spec.js.snap
index 2e5de09d6..9dc2e0790 100644
--- a/tests/html/attributes/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html/attributes/__snapshots__/jsfmt.spec.js.snap
@@ -234,6 +234,179 @@ printWidth: 80
 ================================================================================
 `;
 
+exports[`class-bem1.html format 1`] = `
+====================================options=====================================
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<div class="ProviderMeasuresContainer__heading-row
+  d-flex
+  flex-column flex-lg-row
+  justify-content-start justify-content-lg-between
+  align-items-start align-items-lg-center">Foo</div>
+
+<div  class="a-bem-block a-bem-block--with-modifer ">
+<div  class="a-bem-block__element a-bem-block__element--with-modifer also-another-block" >
+<div  class="a-bem-block__element a-bem-block__element--with-modifer also-another-block__element">
+</div></div> </div>
+
+=====================================output=====================================
+<div
+  class="
+    ProviderMeasuresContainer__heading-row
+    d-flex
+    flex-column flex-lg-row
+    justify-content-start justify-content-lg-between
+    align-items-start align-items-lg-center
+  "
+>
+  Foo
+</div>
+
+<div class="a-bem-block a-bem-block--with-modifer">
+  <div
+    class="
+      a-bem-block__element a-bem-block__element--with-modifer
+      also-another-block
+    "
+  >
+    <div
+      class="
+        a-bem-block__element a-bem-block__element--with-modifer
+        also-another-block__element
+      "
+    ></div>
+  </div>
+</div>
+
+================================================================================
+`;
+
+exports[`class-bem2.html format 1`] = `
+====================================options=====================================
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<div class="news__header widget__content">
+  <div class="news__tabs">
+    <h1 class="news__tab-wrapper news__head-item">
+      <a
+        class="home-link home-link_blue_yes news__tab news__tab_selected_yes mix-tabber__tab mix-tabber__tab_selected_yes"
+        tabindex="0"
+        aria-selected="true"
+        aria-controls="news_panel_news"
+        data-key="news"
+        id="news_tab_news"
+        data-stat-link="news.tab.link.news"
+        data-stat-select="news.tab.select.news"
+        target="_blank"
+        role="tab"
+        href="https://yandex.ru/news?msid=1581089780.29024.161826.172442&mlid=1581088893.glob_225"
+        rel="noopener"
+        >...</a
+      >
+    </h1>
+  </div>
+</div>
+
+=====================================output=====================================
+<div class="news__header widget__content">
+  <div class="news__tabs">
+    <h1 class="news__tab-wrapper news__head-item">
+      <a
+        class="
+          home-link home-link_blue_yes
+          news__tab news__tab_selected_yes
+          mix-tabber__tab mix-tabber__tab_selected_yes
+        "
+        tabindex="0"
+        aria-selected="true"
+        aria-controls="news_panel_news"
+        data-key="news"
+        id="news_tab_news"
+        data-stat-link="news.tab.link.news"
+        data-stat-select="news.tab.select.news"
+        target="_blank"
+        role="tab"
+        href="https://yandex.ru/news?msid=1581089780.29024.161826.172442&mlid=1581088893.glob_225"
+        rel="noopener"
+        >...</a
+      >
+    </h1>
+  </div>
+</div>
+
+================================================================================
+`;
+
+exports[`class-leading-dashes.html format 1`] = `
+====================================options=====================================
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<my-tag class="__prefix1__foo __prefix1__bar __prefix2__foo prefix2 prefix2--something --prefix2--something-else"></my-tag>
+
+<my-tag class="--prefix1--foo --prefix1--bar --prefix2--foo prefix2 prefix2__something __prefix2__something_else"></my-tag>
+
+=====================================output=====================================
+<my-tag
+  class="
+    __prefix1__foo __prefix1__bar
+    __prefix2__foo
+    prefix2 prefix2--something
+    --prefix2--something-else
+  "
+></my-tag>
+
+<my-tag
+  class="
+    --prefix1--foo --prefix1--bar
+    --prefix2--foo
+    prefix2 prefix2__something
+    __prefix2__something_else
+  "
+></my-tag>
+
+================================================================================
+`;
+
+exports[`class-many-short-names.html format 1`] = `
+====================================options=====================================
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<div aria-hidden="true" class="border rounded-1 flex-shrink-0 bg-gray px-1 text-gray-light ml-1 f6 d-none d-on-nav-focus js-jump-to-badge-jump">
+  Jump to
+  <span class="d-inline-block ml-1 v-align-middle">x</span>
+</div>
+
+=====================================output=====================================
+<div
+  aria-hidden="true"
+  class="
+    border
+    rounded-1
+    flex-shrink-0
+    bg-gray
+    px-1
+    text-gray-light
+    ml-1
+    f6
+    d-none d-on-nav-focus
+    js-jump-to-badge-jump
+  "
+>
+  Jump to
+  <span class="d-inline-block ml-1 v-align-middle">x</span>
+</div>
+
+================================================================================
+`;
+
 exports[`class-names.html format 1`] = `
 ====================================options=====================================
 parsers: ["html"]
@@ -296,11 +469,41 @@ width="205px" alt="Yahoo"/></a></h1></div></div>
 =====================================output=====================================
 <img class="foo bar" />
 
-<img class="  " />
+<img class="" />
 <img class />
 
 <img
-  class="looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong a-long-long-long-long-long-class-name another-long-long-long-class-name foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar"
+  class="
+    looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong
+    a-long-long-long-long-long-class-name
+    another-long-long-long-class-name
+    foo
+    bar
+    foo
+    bar
+    foo
+    bar
+    foo
+    bar
+    foo
+    bar
+    foo
+    bar
+    foo
+    bar
+    foo
+    bar
+    foo
+    bar
+    foo
+    bar
+    foo
+    bar
+    foo
+    bar
+    foo
+    bar
+  "
 />
 
 <img class="{{ ...classes }}" />
@@ -313,10 +516,34 @@ width="205px" alt="Yahoo"/></a></h1></div></div>
 <!-- from yahoo website -->
 <div
   id="header-wrapper"
-  class="Bgc(#fff) Bdbc(t) Bdbs(s) Bdbw(1px) D(tb) Pos(f) Tbl(f) W(100%) Z(4) has-scrolled_Bdc($c-fuji-grey-d) Scrolling_Bdc($c-fuji-grey-d) has-scrolled_Bxsh($headerShadow) Scrolling_Bxsh($headerShadow)"
+  class="
+    Bgc(#fff)
+    Bdbc(t)
+    Bdbs(s)
+    Bdbw(1px)
+    D(tb)
+    Pos(f)
+    Tbl(f)
+    W(100%)
+    Z(4)
+    has-scrolled_Bdc($c-fuji-grey-d)
+    Scrolling_Bdc($c-fuji-grey-d)
+    has-scrolled_Bxsh($headerShadow)
+    Scrolling_Bxsh($headerShadow)
+  "
 >
   <div
-    class="Bgc(#fff) M(a) Maw(1301px) Miw(1000px) Pb(12px) Pt(22px) Pos(r) TranslateZ(0) Z(6)"
+    class="
+      Bgc(#fff)
+      M(a)
+      Maw(1301px)
+      Miw(1000px)
+      Pb(12px)
+      Pt(22px)
+      Pos(r)
+      TranslateZ(0)
+      Z(6)
+    "
   >
     <h1 class="Fz(0) Pstart(15px) Pos(a)">
       <a
@@ -339,6 +566,31 @@ width="205px" alt="Yahoo"/></a></h1></div></div>
 ================================================================================
 `;
 
+exports[`class-print-width-edge.html format 1`] = `
+====================================options=====================================
+parsers: ["html"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<div aria-hidden="true" class="border rounded-1 flex-shrink-0 bg-gray px-1 loooooooooooooooooooooooong">
+</div>
+
+=====================================output=====================================
+<div
+  aria-hidden="true"
+  class="
+    border
+    rounded-1
+    flex-shrink-0
+    bg-gray
+    px-1
+    loooooooooooooooooooooooong
+  "
+></div>
+
+================================================================================
+`;
+
 exports[`dobule-quotes.html format 1`] = `
 ====================================options=====================================
 parsers: ["html"]
diff --git a/tests/html/attributes/class-bem1.html b/tests/html/attributes/class-bem1.html
new file mode 100644
index 000000000..66eba1c9b
--- /dev/null
+++ b/tests/html/attributes/class-bem1.html
@@ -0,0 +1,10 @@
+<div class="ProviderMeasuresContainer__heading-row
+  d-flex
+  flex-column flex-lg-row
+  justify-content-start justify-content-lg-between
+  align-items-start align-items-lg-center">Foo</div>
+
+<div  class="a-bem-block a-bem-block--with-modifer ">
+<div  class="a-bem-block__element a-bem-block__element--with-modifer also-another-block" >
+<div  class="a-bem-block__element a-bem-block__element--with-modifer also-another-block__element">
+</div></div> </div>
diff --git a/tests/html/attributes/class-bem2.html b/tests/html/attributes/class-bem2.html
new file mode 100644
index 000000000..b1fa92d9d
--- /dev/null
+++ b/tests/html/attributes/class-bem2.html
@@ -0,0 +1,21 @@
+<div class="news__header widget__content">
+  <div class="news__tabs">
+    <h1 class="news__tab-wrapper news__head-item">
+      <a
+        class="home-link home-link_blue_yes news__tab news__tab_selected_yes mix-tabber__tab mix-tabber__tab_selected_yes"
+        tabindex="0"
+        aria-selected="true"
+        aria-controls="news_panel_news"
+        data-key="news"
+        id="news_tab_news"
+        data-stat-link="news.tab.link.news"
+        data-stat-select="news.tab.select.news"
+        target="_blank"
+        role="tab"
+        href="https://yandex.ru/news?msid=1581089780.29024.161826.172442&mlid=1581088893.glob_225"
+        rel="noopener"
+        >...</a
+      >
+    </h1>
+  </div>
+</div>
diff --git a/tests/html/attributes/class-leading-dashes.html b/tests/html/attributes/class-leading-dashes.html
new file mode 100644
index 000000000..3520dc338
--- /dev/null
+++ b/tests/html/attributes/class-leading-dashes.html
@@ -0,0 +1,3 @@
+<my-tag class="__prefix1__foo __prefix1__bar __prefix2__foo prefix2 prefix2--something --prefix2--something-else"></my-tag>
+
+<my-tag class="--prefix1--foo --prefix1--bar --prefix2--foo prefix2 prefix2__something __prefix2__something_else"></my-tag>
diff --git a/tests/html/attributes/class-many-short-names.html b/tests/html/attributes/class-many-short-names.html
new file mode 100644
index 000000000..ac51d5aa1
--- /dev/null
+++ b/tests/html/attributes/class-many-short-names.html
@@ -0,0 +1,4 @@
+<div aria-hidden="true" class="border rounded-1 flex-shrink-0 bg-gray px-1 text-gray-light ml-1 f6 d-none d-on-nav-focus js-jump-to-badge-jump">
+  Jump to
+  <span class="d-inline-block ml-1 v-align-middle">x</span>
+</div>
diff --git a/tests/html/attributes/class-print-width-edge.html b/tests/html/attributes/class-print-width-edge.html
new file mode 100644
index 000000000..ecd71dd96
--- /dev/null
+++ b/tests/html/attributes/class-print-width-edge.html
@@ -0,0 +1,2 @@
+<div aria-hidden="true" class="border rounded-1 flex-shrink-0 bg-gray px-1 loooooooooooooooooooooooong">
+</div>
diff --git a/tests/html/tags/__snapshots__/jsfmt.spec.js.snap b/tests/html/tags/__snapshots__/jsfmt.spec.js.snap
index 5e7a41abb..77ee9accb 100644
--- a/tests/html/tags/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/html/tags/__snapshots__/jsfmt.spec.js.snap
@@ -3316,14 +3316,18 @@ printWidth: 1
 <ul>
   123
   <li
-    class="foo"
+    class="
+      foo
+    "
     id="bar"
   >
     First
   </li>
   456
   <li
-    class="baz"
+    class="
+      baz
+    "
   >
     Second
   </li>
@@ -3465,13 +3469,25 @@ printWidth: 1
 </div>
 <span>
   <i
-    class="fa fa-refresh fa-spin"
+    class="
+      fa
+      fa-refresh
+      fa-spin
+    "
   />
   <i
-    class="fa fa-refresh fa-spin"
+    class="
+      fa
+      fa-refresh
+      fa-spin
+    "
   />
   <i
-    class="fa fa-refresh fa-spin"
+    class="
+      fa
+      fa-refresh
+      fa-spin
+    "
   />
 </span>