Errors and warnings not understood

I wrote a style for YouTube that changes the font used to Times New Roman. Now the editor used by Stylish is reporting several warnings and an error. I don't understand any of them. They are listed below. Unfortunately, some of them don't appear to be designed with user styles in mind. In those cases, I need to go with the selector used by Google or I won't have a rule that's specific enough.

Warnings

  1. Don't use adjoining classes (many times)
  2. Don't use IDs in selectors. So why does CSS allow it again?
  3. Element (input.ytcp-omnisearch) is overqualified, just use .ytcp-omnisearch without element name. That suggested selector is less specific.
  4. Use of !important. Whoever wrote that warning message doesn't know how often it's needed.
  5. Rule is empty. This is a cascade of the error below.

Error

  1. Expected rbrace: The parser doesn't appear to understand CSS variables. YouTube uses those a lot.

Actual code I developed.

body, #search-input.ytd-searchbox-spt input, paper-item, .entity-type.ytcp-navigation-drawer, .entity-name.ytcp-navigation-drawer, paper-item.ytcp-navigation-drawer, paper-icon-item.ytcp-navigation-drawer, input.ytcp-omnisearch, ytcp-app[enable-page-title] .page-title.ytcp-app, .tab-content.paper-tab, .chip-and-bar.ytcp-chip-bar .ytcp-chip-bar, ytcp-button, ytcp-table-header, .icon-text-edit-triangle-wrap.ytcp-video-row .label-span.ytcp-video-row, .restrictions-list.ytcp-video-row, .tablecell-date.cell-body.ytcp-video-row, #row-container.ytcp-video-row, .tablecell-date.cell-body.ytcp-video-row .cell-description.ytcp-video-row, .tablecell-comments.cell-body.ytcp-video-row a.ytcp-video-row, .tablecell-comments.cell-body.ytcp-video-row span.ytcp-video-row, .likes-container.ytcp-video-row .primary-label.ytcp-video-row, .likes-container.ytcp-video-row .percent-label.ytcp-video-row, #video-title.ytcp-video-list-cell-video, .description.ytcp-video-list-cell-video, .ghp-header-title, .ghp-header-searchBox, .ghp-card-title, .ghp-iconTextComponent-label, .ghp-button, ytcp-app
{
    font-family: Times New Roman!important
}

ytcp-popup-container
{
    --yt-sort-menu-item-style_-_font-family: Times New Roman!important;
    --ytd-code-snippet_-_font-family: Times New Roman!important;
    --ytd-caption_-_font-family: Times New Roman!important;
}
Sign In or Register to comment.