Rename preview-covers to BEM single-class selectors to fix specificity

Replace two-part `.searchResultItem .preview-covers` selectors with
single-class `.search-result-item__preview-covers` to reduce specificity
and resolve stylelint selector-max-specificity violations.

Author: lokesh

openlibrary/macros/SearchResultsWork.html

@@ -175,10 +175,10 @@ <h3 itemprop="name" class="booktitle">
             </ol-read-more>
 
         $if doc.get('ia') and len(doc.get('ia')) > 1:
-          $ blur_preview = "preview-covers--blur" if blur else ""
+          $ blur_preview = "search-result-item__preview-covers--blur" if blur else ""
 
-          <div class="preview-covers-container">
-            <span class="preview-covers $blur_preview">
+          <div class="search-result-item__preview-covers-container">
+            <span class="search-result-item__preview-covers $blur_preview">
               $for x, i in enumerate(doc.get('ia')[1:6]):
                 <a href="$(book_url)?edition=ia:$(urlquote(i))">
                   <img width="35" height="53" loading="lazy" src="//archive.org/services/img/$i" alt="$_('Cover of edition %(id)s', id=i)">

static/css/components/search-result-item.css

@@ -123,18 +123,18 @@
   color: var(--black);
 }
 
-.searchResultItem .preview-covers {
+.search-result-item__preview-covers {
   display: flex;
   align-items: center;
 }
 
-.searchResultItem .preview-covers img {
+.search-result-item__preview-covers img {
   border-radius: var(--border-radius-thumbnail);
   border: 2px solid var(--grey-fafafa);
   opacity: 1;
 }
 
-.searchResultItem .preview-covers--blur img {
+.search-result-item__preview-covers--blur img {
   filter: blur(2px);
 }
 
@@ -189,41 +189,41 @@
   font-style: normal;
 }
 
-.searchResultItem .preview-covers-container {
+.search-result-item__preview-covers-container {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-top: 10px;
   margin-bottom: 5px;
 }
 
-.searchResultItem .preview-covers a {
+.search-result-item__preview-covers > * {
   position: relative;
   display: inline-block;
   flex-shrink: 0;
 }
 
-.searchResultItem .preview-covers a:nth-child(n + 2) {
+.search-result-item__preview-covers :nth-child(n + 2) {
   margin-left: -8px;
 }
 
-.searchResultItem .preview-covers a:nth-child(1) {
+.search-result-item__preview-covers :nth-child(1) {
   z-index: var(--z-index-level-5);
 }
 
-.searchResultItem .preview-covers a:nth-child(2) {
+.search-result-item__preview-covers :nth-child(2) {
   z-index: var(--z-index-level-4);
 }
 
-.searchResultItem .preview-covers a:nth-child(3) {
+.search-result-item__preview-covers :nth-child(3) {
   z-index: var(--z-index-level-3);
 }
 
-.searchResultItem .preview-covers a:nth-child(4) {
+.search-result-item__preview-covers :nth-child(4) {
   z-index: var(--z-index-level-2);
 }
 
-.searchResultItem .preview-covers a:nth-child(5) {
+.search-result-item__preview-covers :nth-child(5) {
   z-index: var(--z-index-level-1);
 }
 
@@ -277,20 +277,20 @@
 }
 
 @media (hover: hover) and (pointer: fine) {
-  .searchResultItem .preview-covers a:hover {
+  .search-result-item__preview-covers :hover {
     z-index: var(--z-index-level-5);
   }
 
-  .searchResultItem .preview-covers a:hover img {
+  .search-result-item__preview-covers :hover :where(img) {
     border-color: var(--primary-blue);
   }
 }
 
-.searchResultItem .preview-covers a:active img {
+.search-result-item__preview-covers :active :where(img) {
   transform: scale(0.97);
 }
 
-.searchResultItem .preview-covers a:focus-visible {
+.search-result-item__preview-covers :focus-visible {
   z-index: var(--z-index-level-5);
   box-shadow: var(--box-shadow-focus);
   border-radius: var(--border-radius-thumbnail);