diff --git a/claro.theme b/claro.theme
index c4fb823..3d59423 100644
--- a/claro.theme
+++ b/claro.theme
@@ -443,7 +443,8 @@ function claro_preprocess_filter_tips(&$variables) {
 function claro_preprocess_table(&$variables) {
   if (!empty($variables['header'])) {
     foreach ($variables['header'] as &$header_cell) {
-      /* For 8.6.x and below. */
+      // For 8.6.x and below.
+      // @todo Remove this after 8.6.x is out of support.
       if ($header_cell['content'] instanceof GeneratedLink) {
         $dom_doc = Html::load($header_cell['content']->getGeneratedLink());
         $anchors = $dom_doc->getElementsByTagName('a');
@@ -455,18 +456,18 @@ function claro_preprocess_table(&$variables) {
             $query = !empty($parsed_url['query']) ? $parsed_url['query'] : [];
 
             if (isset($query['order']) && isset($query['sort'])) {
-              $header_cell['attributes']->addClass('th--sortable');
+              $header_cell['attributes']->addClass('sortable-heading');
             }
           }
         }
       }
 
-      /* For 8.7.x and above. */
+      // For 8.7.x and above.
       if ($header_cell['content'] instanceof Link) {
         $query = $header_cell['content']->getUrl()->getOption('query') ?: [];
 
         if (isset($query['order']) && isset($query['sort'])) {
-          $header_cell['attributes']->addClass('th--sortable');
+          $header_cell['attributes']->addClass('sortable-heading');
         }
       }
     }
@@ -487,7 +488,7 @@ function claro_preprocess_views_view_table(&$variables) {
         $query = !empty($parsed_url['query']) ? $parsed_url['query'] : [];
 
         if (isset($query['order']) && isset($query['sort'])) {
-          $header_cell['attributes']->addClass('th--sortable');
+          $header_cell['attributes']->addClass('sortable-heading');
         }
       }
     }
diff --git a/css/src/components/tables.css b/css/src/components/tables.css
index 56ab58a..c4c5a32 100644
--- a/css/src/components/tables.css
+++ b/css/src/components/tables.css
@@ -35,20 +35,20 @@ th {
  * Table sort.
  */
 /* Table head cell containing sort link. */
-.th--sortable {
+.sortable-heading {
   padding: 0 1rem;
 }
 /* The actual sort link. */
-.th--sortable > a {
+.sortable-heading > a {
   display: block;
   padding: 0.5rem 1.5rem 0.5rem 0; /* LTR */
   color: inherit;
 }
-[dir="rtl"] .th--sortable > a {
+[dir="rtl"] .sortable-heading > a {
   padding-right: 0;
   padding-left: 1.5rem;
 }
-.th--sortable > a::before {
+.sortable-heading > a::before {
   position: absolute;
   top: 0;
   right: 1rem;
@@ -61,11 +61,11 @@ th {
 }
 /* stylelint-disable-next-line selector-type-no-unknown */
 _:-ms-fullscreen, /* Only IE 11 */
-.th--sortable > a::before {
+.sortable-heading > a::before {
   top: auto;
   height: 100%;
 }
-.th--sortable > a::after {
+.sortable-heading > a::after {
   position: absolute;
   top: 50%;
   right: 1rem;
@@ -79,45 +79,45 @@ _:-ms-fullscreen, /* Only IE 11 */
 }
 /* stylelint-disable-next-line selector-type-no-unknown */
 _:-ms-fullscreen, /* Only IE 11 */
-.th--sortable > a::after {
+.sortable-heading > a::after {
   position: static;
   float: right;
   margin-top: 0.125rem; /* 2px */
   margin-right: -1.5rem; /* -24px */
 }
-[dir="rtl"] .th--sortable > a::after {
+[dir="rtl"] .sortable-heading > a::after {
   right: auto;
   left: 1rem;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='m12.25,0.25v1.5H1.75v-1.5z m0,3v1.5h-7.5v-1.5z m0,3v1.5h-4.5v-1.5z' fill='%23222330'/%3E%3C/svg%3E");
 }
 /* stylelint-disable-next-line selector-type-no-unknown */
 _:-ms-fullscreen, /* Only IE 11 */
-[dir="rtl"] .th--sortable > a::after {
+[dir="rtl"] .sortable-heading > a::after {
   float: left;
   margin-right: 0;
   margin-left: -1.5rem; /* -24px */
 }
-/* Sort link focus/hover state. */
-.th--sortable > a:focus,
-.th--sortable > a:hover {
+/* Sortable cell's link focus/hover state. */
+.sortable-heading > a:focus,
+.sortable-heading > a:hover {
   text-decoration: none;
 }
-.th--sortable > a:focus::before,
-.th--sortable > a:hover::before {
+.sortable-heading > a:focus::before,
+.sortable-heading > a:hover::before {
   border-color: inherit;
 }
-.th--sortable > a:focus::after,
-.th--sortable > a:hover::after {
+.sortable-heading > a:focus::after,
+.sortable-heading > a:hover::after {
   opacity: 1;
 }
-/* Sort link's active state. */
-.th--sortable.is-active > a {
+/* Sortable cell's active state. */
+.sortable-heading.is-active > a {
   color: var(--color-absolutezero);
 }
-.th--sortable.is-active > a::before {
+.sortable-heading.is-active > a::before {
   border-color: var(--color-absolutezero);
 }
-.th--sortable.is-active > a::after {
+.sortable-heading.is-active > a::after {
   content: none;
 }