나의 가장 멍청한 CSS 실수

플라톤에 의해 재발행

팔로워 : 0

우리는 모두 코드에서 실수를 합니다. 그것은 일어난다! 내 책상 위에 "마지막 실수 이후의 날" 표시 중 하나가 걸려 있으면 큰 거위 알이 항상 내 위에 떠 있을 것입니다. 그것도 큰 실수를 할 필요는 없습니다. 내 서투른 자아는 오타에서 완전한 npm 모듈 디렉토리에 이르기까지 repos에 작은 오류를 범했습니다.

우우우우우우우우우우우우우우워

CSS에 대해 정말 좋아하는 것 중 하나입니다. 정말 관대합니다. 오타를 이해하지 못하면 일치 항목을 찾기 위해 캐스케이드를 계속 찾습니다. 위치가 맞지 않는 캐릭터가 사이트를 파괴하고 포로를 잡지 않는 그런 물건은 없습니다. 하지만 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! */
}

내가 아주 자주 발견하는 또 다른 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. 진심으로, 이러한 일들이 발생합니다!

실수에 대해 이야기하는 것은 어렵다

놀라운 트릭을 공유하는 블로그 게시물을 읽고 일종의 사기꾼 증후군을 느낀 적이 있습니까? 블로그 게시물이 종종 놀라운 트릭에 들어가는 실제 작업과 실패를 은폐하기 때문이라고 생각합니다. 생계를 위해 그런 게시물을 읽는 사람으로서, 대다수는 아닐지라도 많은 사람들이 잠재적으로 당혹스러운 실수를 제거하고 매끄럽게 만드는 여러 단계의 편집을 거칩니다.

그 엄청나게 멋진 기사조차도 모든 것을 얻기 전에 실패해야합니다. 우오오오 와 아아아아.

모든 앱, 웹 사이트, 데모 또는 우연히 접하는 모든 것이 마찬가지입니다. 그들 중 누구라도 처음에 완벽하게 나올 가능성은 거의 없습니다.

그러나 내가 당신에게 완전히 정직하다면, 나는 종종 더 놀랍습니다 (그리고 관심이 있습니다) 여행 그것은 무언가, 사마귀 및 모든 것을 달성하는 데 필요합니다. 여행은 그것이 어떤 것인지 엿보는 것입니다. 프론트엔드 개발자처럼 생각하기. 그것이 실제(가장 가치 있는) 학습이 일어나는 곳입니다.

그리고 이 모든 것은 단지 내가 정말로 묻고 싶은 것에 대한 이야기일 뿐입니다...