私の最も愚かなCSSの間違い

プラトン再発行

フォロワー： 0

私たちは皆、コードに間違いを犯しています。それが起こります！「最後の間違いからの日数」の看板が机の上にぶら下がっていたら、大きなガチョウの卵がいつも私の上に浮かんでいたでしょう。大きな間違いである必要もありません。私の不器用な自己は、タイプミスから完全なnpmモジュールディレクトリに至るまで、リポジトリに小さなエラーをコミットしました。

おっと。

それは私がCSSについて本当に好きなことのXNUMXつです：それは一体として寛容です。タイプミスを理解できない場合は、一致するものを探してカスケードを検索し続けます。場違いのキャラクターがサイトを壊し、囚人を連れて行かないようなものはありません。しかし、CSSの間違いがポップアップするとき、それはまだ恥ずかしいです！

このように、私は自分が認めたいよりも多くの時間を作っていることに気づきます。

.element {
  display: flexbox; /* 🤦‍♂️ */
}

または、グラデーションを設定しようとすると、 background プロパティ：

.gradient {
  linear-gradient(45deg, rgb(50% 100% 90%), rgb(62% 85% 93%));
}

私はどれほど近いのが嫌い X & C 何かを燃やして間違いを犯した回数を数えられないので、キーボードを使用しています px for pc 単位

.element {
  font-size: 16pc; /* I meant pixels! */
}

私がよく目にするもうXNUMXつのCSSの間違いは、コードスニペットを含むブログ投稿で頻繁に見つけるため、他の多くの人が犯していることを知っています。

// This is not a CSS comment.
.element {
  /* This is a CSS comment. */
}

使用するのを忘れたことがありますか var() CSS変数の周り？確かにあります。

.element {
  color: --primary-color;
}

CSS変数と言えば、それらに名前を付けるのは難しいです（他のすべてのように）そして私はしばしば私が名前を付けた変数のいくつかの間違ったバージョンを使用します！

:root {
  --color-primary: #FF5722;
  --color-secondary: #3E2723;
}

/* Much later on... */

.element {
  color: var(--primary-color); /* 🙃 */
}

はい、私は確かに以前にCSSのスニペットをコピーして、それを機能させるために派手な引用を邪魔するだけにしました。

.element::before {
  content: “”; /* Should be "" */
}

そして、はい、私はそれらの引用が原因であると理解するのにあまりにも長い時間を費やしました。

その最後のものを見ると、私は時々設定するのを忘れていることを思い出します content 私が働いているときのプロパティ ::before or ::after。これは、要素の設定を忘れた方法を思い出させます position それを相殺したり変更したりする前に z-index。真剣に、これらのことが起こります！

間違いについて話すのは難しい

驚くべきトリックを共有しているブログ投稿を読み終えて、ある種のインポスター症候群を感じたことはありますか？これは主に、ブログの投稿が、驚くべきトリックにつながる実際の作業（および失敗）を覆い隠すことが多いためだと思います。そのような投稿を生計を立てるために読む人として、私はあなたに、大多数ではないにしても、多くの人が、潜在的に恥ずかしい間違いを取り除き、滑らかにする多くの編集を行っていると言うことができます。

それらのばかばかしいほど素晴らしい記事でさえ、それらすべてを手に入れる前に失敗しなければなりません うわー & ああああ.

同じことが、アプリ、ウェブサイト、デモ、またはあなたが偶然出くわしたものすべてに当てはまります。それらのいずれかが最初に完璧に出てきた可能性は、nothin'の隣にあります。

しかし、私があなたに完全に正直であるならば、私はしばしばもっと驚かされます（そして興味があります）旅何か、いぼ、そしてすべてを成し遂げるのに必要です。旅はそれがどのようなものかを垣間見るフロントエンド開発者のように考える。ここで、実際の（そして最も価値のある）学習が行われます。

そして、これはすべて、私が本当に聞きたいことを積み上げているだけです…