stop being lazy with css selectors

2026-04-17 09:28:43 -04:00 · 2022-01-30 11:38:37 -05:00
parent 9f34cec930
commit f0259dbab5
24 changed files with 498 additions and 471 deletions
--- a/components/Footer/Footer.module.css
+++ b/components/Footer/Footer.module.css
@@ -7,7 +7,7 @@
  transition: color 0.25s ease, background 0.25s ease, border 0.25s ease;
 }

-.footer a {
+.link {
  color: inherit;
 }

--- a/components/Footer/Footer.tsx
+++ b/components/Footer/Footer.tsx
@@ -1,5 +1,6 @@
 import { memo } from "react";
 import Link from "next/link";
+import classNames from "classnames";
 import { HeartIcon, NextjsLogo } from "../Icons";
 import * as config from "../../lib/config";

@@ -11,11 +12,15 @@ const Footer = () => (
      <div className={styles.license}>
        Content{" "}
        <Link href="/license/" prefetch={false}>
-          <a title="Creative Commons Attribution 4.0 International">licensed under CC-BY-4.0</a>
+          <a className={styles.link} title="Creative Commons Attribution 4.0 International">
+            licensed under CC-BY-4.0
+          </a>
        </Link>
        ,{" "}
        <Link href="/previously/" prefetch={false}>
-          <a title="Previously on...">2001</a>
+          <a className={styles.link} title="Previously on...">
+            2001
+          </a>
        </Link>{" "}
        – {new Date().getFullYear()}.
      </div>
@@ -26,7 +31,7 @@ const Footer = () => (
        </span>{" "}
        and{" "}
        <a
-          className={styles.nextjs}
+          className={classNames(styles.link, styles.nextjs)}
          href="https://nextjs.org/"
          title="Powered by Next.js"
          aria-label="Next.js"
@@ -37,7 +42,7 @@ const Footer = () => (
        </a>
        .{" "}
        <a
-          className={styles.view_source}
+          className={classNames(styles.link, styles.view_source)}
          href={`https://github.com/${config.githubRepo}`}
          title="View Source on GitHub"
          target="_blank"
--- a/components/Heading/Heading.module.css
+++ b/components/Heading/Heading.module.css
@@ -20,7 +20,7 @@
 .anchor {
  margin: 0 0.25em;
  padding: 0 0.25em;
-  color: var(--medium-light) !important;
+  color: var(--medium-light);
  font-weight: 300;
  opacity: 0; /* overridden on hover below (except on small screens) */
 }
@@ -28,7 +28,7 @@
  content: "\0023"; /* pound sign `#`, done here to keep content DOM cleaner */
 }
 .anchor:hover {
-  color: var(--link) !important;
+  color: var(--link);
 }
 /* make anchor link show up on hover over its corresponding heading */
 .heading:hover .anchor {
--- a/components/Heading/Heading.tsx
+++ b/components/Heading/Heading.tsx
@@ -16,7 +16,7 @@ const Heading = ({ as: Component, id, className, children, ...rest }: Props) =>

      {/* add anchor link to H2s and H3s. ID is already generated by rehype-slug. `#` character inserted via CSS. */}
      {id && (Component === "h2" || Component === "h3") && (
-        <a className={styles.anchor} href={`#${id}`} tabIndex={-1} aria-hidden="true" />
+        <a className={styles.anchor} href={`#${id}`} tabIndex={-1} aria-hidden={true} />
      )}
    </Component>
  );
--- a/components/Image/Image.module.css
+++ b/components/Image/Image.module.css
@@ -6,6 +6,6 @@
  text-align: center;
 }

-.wrapper img {
+.image {
  border-radius: var(--rounded-edge-radius);
 }
--- a/components/Image/Image.tsx
+++ b/components/Image/Image.tsx
@@ -42,7 +42,7 @@ const CustomImage = ({
  return (
    <div className={classNames(styles.wrapper, className)}>
      {/* @ts-ignore */}
-      <NextImage {...imageProps} {...rest} />
+      <NextImage className={styles.image} {...imageProps} {...rest} />
    </div>
  );
 };
--- a/components/Menu/Menu.tsx
+++ b/components/Menu/Menu.tsx
@@ -13,22 +13,22 @@ type Props = {

 const links = [
  {
-    icon: <HomeIcon className={styles.icon} aria-hidden={true} />,
+    icon: <HomeIcon className={styles.icon} />,
    text: "Home",
    href: "/",
  },
  {
-    icon: <NotesIcon className={styles.icon} aria-hidden={true} />,
+    icon: <NotesIcon className={styles.icon} />,
    text: "Notes",
    href: "/notes",
  },
  {
-    icon: <ProjectsIcon className={styles.icon} aria-hidden={true} />,
+    icon: <ProjectsIcon className={styles.icon} />,
    text: "Projects",
    href: "/projects",
  },
  {
-    icon: <ContactIcon className={styles.icon} aria-hidden={true} />,
+    icon: <ContactIcon className={styles.icon} />,
    text: "Contact",
    href: "/contact",
  },
--- a/components/NoteMeta/NoteMeta.module.css
+++ b/components/NoteMeta/NoteMeta.module.css
@@ -7,11 +7,7 @@
  color: var(--medium);
 }

-.meta a {
-  color: inherit;
-}
-
-.meta > div {
+.meta_item {
  display: inline-flex;
  margin-right: 1.6em;
  white-space: nowrap;
@@ -46,6 +42,11 @@
  margin-right: 0;
 }

+.date_link,
+.edit_link {
+  color: inherit;
+}
+
 .views {
  /* fix potential layout shift when number of hits loads */
  min-width: 7em;
--- a/components/NoteMeta/NoteMeta.tsx
+++ b/components/NoteMeta/NoteMeta.tsx
@@ -1,3 +1,4 @@
+import classNames from "classnames";
 import { format } from "date-fns";
 import HitCounter from "../HitCounter/HitCounter";
 import { DateIcon, TagIcon, EditIcon, ViewsIcon } from "../Icons";
@@ -5,20 +6,30 @@ import * as config from "../../lib/config";
 import type { NoteMetaType } from "../../types";

 import styles from "./NoteMeta.module.css";
+import Link from "next/link";

 type Props = Pick<NoteMetaType, "slug" | "date" | "title" | "tags">;

 const NoteMeta = ({ slug, date, title, tags = [] }: Props) => (
  <div className={styles.meta}>
-    <div>
-      <span>
-        <DateIcon className={styles.icon} />
-      </span>
-      <span title={format(new Date(date), "PPppp")}>{format(new Date(date), "MMMM d, yyyy")}</span>
+    <div className={styles.meta_item}>
+      <Link
+        href={{
+          pathname: "/notes/[slug]/",
+          query: { slug: slug },
+        }}
+      >
+        <a className={styles.date_link}>
+          <span>
+            <DateIcon className={styles.icon} />
+          </span>
+          <span title={format(new Date(date), "PPppp")}>{format(new Date(date), "MMMM d, yyyy")}</span>
+        </a>
+      </Link>
    </div>

    {tags.length > 0 && (
-      <div className={styles.tags}>
+      <div className={classNames(styles.meta_item, styles.tags)}>
        <span>
          <TagIcon className={styles.icon} />
        </span>
@@ -30,8 +41,9 @@ const NoteMeta = ({ slug, date, title, tags = [] }: Props) => (
      </div>
    )}

-    <div>
+    <div className={styles.meta_item}>
      <a
+        className={styles.edit_link}
        href={`https://github.com/${config.githubRepo}/blob/main/notes/${slug}.mdx`}
        target="_blank"
        rel="noopener noreferrer"
@@ -44,7 +56,7 @@ const NoteMeta = ({ slug, date, title, tags = [] }: Props) => (
      </a>
    </div>

-    <div className={styles.views}>
+    <div className={classNames(styles.meta_item, styles.views)}>
      <span>
        <ViewsIcon className={styles.icon} />
      </span>
--- a/components/NoteTitle/NoteTitle.module.css
+++ b/components/NoteTitle/NoteTitle.module.css
@@ -5,16 +5,12 @@
  font-weight: 700;
 }

-.title a {
-  color: inherit;
+.title code {
+  margin: 0 0.075em;
 }

-.title code {
-  font-size: 1em;
-  background: none !important;
-  border: 0 !important;
-  margin: 0 0.075em !important;
-  padding: 0 !important;
+.link {
+  color: inherit;
 }

@media screen and (max-width: 768px) {
--- a/components/NoteTitle/NoteTitle.tsx
+++ b/components/NoteTitle/NoteTitle.tsx
@@ -1,19 +1,20 @@
 import Link from "next/link";
+import classNames from "classnames";
 import type { NoteMetaType } from "../../types";

 import styles from "./NoteTitle.module.css";

-type Props = Pick<NoteMetaType, "slug" | "htmlTitle">;
+type Props = Pick<NoteMetaType, "slug" | "htmlTitle"> & { className?: string };

-const NoteTitle = ({ slug, htmlTitle, ...rest }: Props) => (
-  <h1 className={styles.title}>
+const NoteTitle = ({ slug, htmlTitle, className, ...rest }: Props) => (
+  <h1 className={classNames(styles.title, className)}>
    <Link
      href={{
        pathname: "/notes/[slug]/",
        query: { slug: slug },
      }}
    >
-      <a dangerouslySetInnerHTML={{ __html: htmlTitle }} {...rest} />
+      <a className={styles.link} dangerouslySetInnerHTML={{ __html: htmlTitle }} {...rest} />
    </Link>
  </h1>
 );
--- a/components/OctocatLink/OctocatLink.module.css
+++ b/components/OctocatLink/OctocatLink.module.css
@@ -1,10 +1,10 @@
 .link {
  margin: 0 0.4em;
-  color: var(--text) !important;
+  color: var(--text);
 }

 .link:hover {
-  color: var(--link) !important;
+  color: var(--link);
 }

 .icon {
--- a/components/PageTitle/PageTitle.module.css
+++ b/components/PageTitle/PageTitle.module.css
@@ -5,7 +5,7 @@
  text-align: center;
 }

-.title a {
+.link {
  color: inherit;
 }

--- a/components/PageTitle/PageTitle.tsx
+++ b/components/PageTitle/PageTitle.tsx
@@ -17,7 +17,7 @@ const PageTitle = ({ className, ...rest }: Props) => {
  return (
    <h1 className={classNames(styles.title, className)}>
      <Link href={canonical}>
-        <a {...rest} />
+        <a className={styles.link} {...rest} />
      </Link>
    </h1>
  );
--- a/components/RepositoryCard/RepositoryCard.module.css
+++ b/components/RepositoryCard/RepositoryCard.module.css
@@ -1,6 +1,6 @@
 .card {
  width: 100%;
-  padding: 1.2em 1.2em 0.8em;
+  padding: 1.2em 1.2em 0.8em 1.2em;
  border: 1px solid;
  border-radius: var(--rounded-edge-radius);
  font-size: 0.85em;
@@ -16,7 +16,8 @@
 }

 .description {
-  margin: 0.7em 0 0.5em;
+  margin-top: 0.7em;
+  margin-bottom: 0.5em;
  line-height: 1.7;
 }

@@ -33,12 +34,12 @@
  color: var(--medium);
 }

-.meta_item a {
-  color: inherit !important;
+.meta_link {
+  color: inherit;
 }

-.meta_item a:hover {
-  color: var(--link) !important;
+.meta_link:hover {
+  color: var(--link);
 }

 .octicon,
--- a/components/RepositoryCard/RepositoryCard.tsx
+++ b/components/RepositoryCard/RepositoryCard.tsx
@@ -29,6 +29,7 @@ const RepositoryCard = ({ name, url, description, language, stars, forks, update
      {stars > 0 && (
        <div className={styles.meta_item}>
          <a
+            className={styles.meta_link}
            href={`${url}/stargazers`}
            title={`${stars.toLocaleString("en-US")} ${stars === 1 ? "star" : "stars"}`}
            target="_blank"
@@ -43,6 +44,7 @@ const RepositoryCard = ({ name, url, description, language, stars, forks, update
      {forks > 0 && (
        <div className={styles.meta_item}>
          <a
+            className={styles.meta_link}
            href={`${url}/network/members`}
            title={`${forks.toLocaleString("en-US")} ${forks === 1 ? "fork" : "forks"}`}
            target="_blank"