회사에서 마지막으로 했던 프로젝트는 자체적으로 평가하자면 완전한 실패작이다. 다른 사람이 하던 코딩을 급하게 넘겨 받았고, 채 며칠이 되지않는 시간동안 급하게 완성해 내어야 했다.

때문에 제작에 앞서 전반적인 제작계획이 전혀 이루어지지 못했고, 페이지에 따라, 상황에 따라 급급하게 붙여나간 코드들은 모듈화에 실패했다.

키보드를 두드리기 전에 고민할 충분한 시간이 주어지지 않은 프로젝트는 언제나 최악의 결과를 가져온다.

아무튼 코딩 중에 아주 초보적인 실수를 한 부분이 있어 복기한다.

.content p,
.content div,
.content img,
.content a,
.content ul,
.content ol,
.content blockquote {
    margin-bottom: 10px;
}

style.css의 제작 초반에 관여하질 못했고, 메인 페이지의 전반적인 구조가 마무리된 상황이었다. 보통 문단과 문단을 구분짓기 위해서 대부분의 요소 아래쪽에 마진을 주는 방법을 택하는데, 코딩이 끝난 메인 페이지의 요소들에 영향을 주지않기 위해 컨텐츠영역에 들어가게될 여러 요소들에 마진을 주었다.

그러나, 메인 영역을 제외하고도 문단에 속하지 않는 요소들 - 버튼, 레이아웃, 인풋 등등 - 이 많기 때문에 매번 margin-bottom 값을 0으로 만들어줘야하는 경우가 생겼다.

.class element 방식으로 css 선택자를 입력했을 경우에는 하나의 공백으로 해당 선택자의 우선순위가 높아지게 된다.

.element와 .parent-class .element는 같은 요소를 선택하지만, 후자의 우선순위가 높기 때문에 .parent-class .element에 입력된 css property가 우선적용된다.

때문에 일일이 요소뒤에 우선순위를 강제로 높여주는 !important 를 붙히거나 부모클래스를 어거지로 앞에 붙여넣으면서 우선순위값을 맞춰주어야 했다. 그러나 이 경우에 부모클래스의 이름이 달라질 수도 있고, 서로 다른 부모에 존재하는 같은 class 들에 스타일을 줘야하는 일이 생길 수도 있기에 영 찝찝하다.

아무튼, 두서없이 진행된 프로젝트이기에 미련은 없지만 처음 공부할 때 배웠던 것들의 중요성을 다시 깨닫게 된다.

왠만하면 선택자는 하나로 지정한다.

a,
p,
div,
ul,
ol,
img,
blockquote {
    margin-bottom: 10px;
}

예를 들어 애초에 위와 같이 코드를 제작해 두었다면, 뒤에서 억지로 부모 클래스를 작성하거나 !important를 남발하지않았을 것이다. 그리고 우선순위에 문제가 생기지 않는 코드들은 다른 사람이 유지보수하게될 경우에도 쉽게 접근할 수 있다.

그러나 거기에 대한 과도한 몰입으로 모든 요소들에 길고 긴 클래스를 일일히 적어주게되는 경우도 생기기도 했는데, 그런 경우는 사전에 프로젝트에 대한 회의를 거쳐, 모듈화화여 반복될 요소들과 절대로 반복될 일이 없는 요소들을 구분하여 반복될 여지가 없는 요소들은 가차없이 상속을 이용하는 것으로 방지할 수 있을 것이다.