CSS, JS 및 HTML을 검토하기위한 지침을 작성하라는 요청을 받았습니다. JS에 대한 코딩 지침이 있지만 HTML 및 CSS에 대해서는 잘 모릅니다. JS를 검토하기 위해 나는 반드시 그 지침을 따르고 언급 할 것입니다. 그러나 CSS와 HTML은 어떻습니까? 논리적 오류 및 들여 쓰기 문제 외에도 마크 업 및 CSS를 검토 할 때 확인해야 할 사항이 있습니까?
답변:
찾아야 할 사항 :
H1- H6제목, 및 UL/ OL또는 LI목록 등?<b>, <i>, <center>, <font>)를 사용하지?img-caption) 의 함수를 나타내며 형식 ( bold-red) 또는 내용 ( pink-elephant)이 아닌가?HTML에서 좋은 스타일의 중요한 요소 중 하나는 점진적 향상 입니다. 즉, CSS 나 JavaScript가 없어도 HTML 레이아웃이 양호하게 렌더링됩니다. 그런 다음 JS / CSS가 처리되면 더 좋아 보일 것입니다 (예 : 구식 HTML <select>드롭 다운이 애니메이션으로 표시됨).
이것은 비침 입적 마크 업과도 관련이 있습니다. 대신에을 <font style="color:red;font-size:16pt">Hello</font>사용 <div class="red-colored-big-fond">Hello</div>합니다.
JavaScript와 동일합니다. 대신 <button onclick="javascript:alert('a');">Clickme</button>버튼 클래스 / ID를 지정하고 JavaScript에서 대상으로 지정하십시오. 또한 마크 업 코드를보다 쉽게 관리 할 수 있습니다.
작업을 수행하는 데 최소량의 마크 업이 사용되는지 확인하십시오. 마크 업도 의미가 있는지 확인하고 태그가 똑같은 일을하고 더 많은 정보를 제공 할 때는 사용하지 마십시오. 스팬이 블록 요소로 만들어지지 않았는지 확인하고 그 반대도 마찬가지입니다.
또한 alex는 원형 교차로에서 좋은 점을 제시합니다. "red-colored-big-font"와 같은 클래스 이름을 사용하지 않도록하십시오. 실제 배포 된 약 20 초 후에 누군가가 작은 파란색 글꼴로 변경하기 때문입니다. 나는 실제로이 CSS를 보았다 :
.arial12pt { font-family: Verdana; font-size: 8pt; }마크 업의 모든 내용은 페이지의 모양이 아니라 페이지의 내용을 설명해야합니다. 나는 점진적인 향상에 대해 분명히 동의하지만 다시 한 번 우회합니다. 이 페이지는 CSS가없는 것과 동일하게 CSS를 사용하여 어디에서나 볼 필요가 없습니다. table-land와 spacer.gif로 돌아 가기 때문에 그것들을 똑같이 보이게하지 마십시오.
HTML이 진행되는 한, 나는 항상 파일에 계층 구조와 들여 쓰기가 필요하다는 것을 지적합니다. 예를 들어 div가 많은 경우 :
<div id="content">
<div id="post">
<div class="title">
Blah Blah Title
</div>
</div>
</div>
레이아웃과 템플릿을 만드는 대부분의 사람들에게는 이것이 매우 분명하다고 생각하지만, 구조적 계층 구조가없는 잘못된 HTML을 보았을 때 다른 사람이 읽기가 어렵습니다. 더 많은 CS 배경에서 나온 것 같습니다. 이것은 내 마음에 붙어 있습니다. CSS도 마찬가지입니다. div 스타일을 지정한다고 가정 해 보겠습니다.
#whatever{
background-image: url('blah.gif');
color: #FFF000;
}
들여 쓰기를 사용하면 PHP / Ruby / Whatever와 같이 다른 언어가 혼합되어있을 때 빠르게 읽을 수 있습니다. 다시, 그것은 당신이 가장 잘 작동하는 방법에 달려 있지만, 다른 사람들이 내 HTML을 읽을 때 나는 그것을 정말로 조직적으로 만들고 싶습니다 :).
또한 위에서 언급했듯이 CSS 클래스 및 ID 관련 이름을 레이아웃에 이름을 지정하는 것이 좋습니다. 특히 털이 많을 때 (다른 언어의 변수 및 메서드 이름 지정과 같이). 주의해야 할 사항은 여백, 패딩 및 기타 정렬 문제에 대한 "추측과 확인"이 두려운 것입니다. 종종 피하려고하는 것은 여백과 패딩에 음수를 넣는 것입니다. 레이아웃을 직접 만들지 않으면 혼란 스러울 수 있으며 나중에 다시 돌아와서 수정하려면 레이아웃을 점검해야 할 수도 있습니다. 제 생각에는 CSS에서 하키 또는 "kludgy"를 시도하지 않는 것이 좋습니다. CSS를 재구성해야하더라도 일반적으로 더 좋은 방법이 있습니다!
나는 내가 좋아하는 이 표준 문서를 발견 했다. 또한 점진적 향상에 대해 말한 내용을 에코하겠습니다. 일반적으로 다른 사람이 HTML / CSS를 작성하는 경우 나중에 줄을보고 마크 업이 얼마나 나쁘지 않은지 유쾌하게 놀라게하고 간단한 스타일을 쉽고 효율적으로 조정할 수 있어야합니다.