CSS3 스타일 시트 작업을위한 팁

웹 사이트의 구조를 정의하고 DOM 정확한 방식으로 스타일을 정의하는 것이 중요합니다. 또한 가장 창의적인 영역이며 웹 사이트의 마지막 모서리까지 가장 높은 정밀도로 사용자 정의 할 수 있습니다. 캐스 케이 딩 스타일 시트가 가장 적합한 솔루션이지만 웹 개발 세계에 처음 진출하는 모든 사람들에게 최상의 결과를 얻기 위해 고려해야 할 몇 가지 팁이 있습니다.

봉헌 된 프런트 엔드의 전형적인 전문적인 결과를 얻으려면 이러한 유형의 실행에서 가장 일반적인 오류의 순서, 가독성 및 수정과 같은 특정 측면을 고려할 필요가 있습니다. 나는 아래에 공유 다섯 가지 팁 매우 기본적이지만 동시에 CSS 스타일 시트의 처리 및 최적 구성에 매우 중요합니다.

CSS3 스타일 시트에 효과적인 순서와 구조를 설정해야합니다.

항상 스타일 시트를 계층 적 순서로 나눕니다. 처음에는 일반적으로 일반 선택기를 적용한 다음 html 선택기의 선언을 추가하고 마지막으로 컨테이너 및 부 요소의 ID 내부에서 작업합니다. 기본적으로 접지 DOM의 논리를 따르십시오. 부모부터 시작하여 아이들과 함께 끝납니다. 그러나 다른 공식이나 순서를 따를 수도 있습니다. 예를 들어 선택자와 선언을 그룹화하여 해당 기능이 무엇인지 고려할 수 있습니다. 모든 것은 우리의 선호도가 무엇인지, 그리고 우리가 일하는 것이 더 편안하다고 느끼는가에 달려 있습니다.

각 선택기에 대해 명확하고 간결한 이름을 선택하십시오.

고려해야 할 매우 중요한 사항이 있는데, CSS3는 대문자와 소문자 사용이 다르기 때문에 대문자로 단어를 쓰면 다른 의미를 가질 수 있고 오류가 발생할 수 있습니다. 가장 간단한 것은 이러한 유형의 문제를 피하기 위해 항상 소문자를 사용하는 것입니다. 또한 시도 명확하게 알아볼 수있는 클래스 이름과 ID를 선택하십시오. 그리고 그들은 우리를 의심이나 오류로 유추하지 않습니다.

명확한 주석을 추가하는 것을 잊지 마십시오

분명히 레이아웃 디자이너, 다른 디자이너 또는 개발자와 같은 작업 팀의 클라이언트 또는 동료와 같은 다른 사람과 파일을 공유해야합니다. 이러한 이유로 구조에주의를 기울이고 깨끗하고 질서 정연한 마무리를 보장하는 것이 매우 중요합니다. 명확한 주석은 스타일 시트에 액세스하는 모든 사람이 한 눈에 빠르게 길을 찾을 수 있도록 도와줍니다. 고려해야 할 모든 유형의 관찰 콘텐츠로 표시되어야합니다. Html 파일과 CSS 파일 모두에 콘텐츠를 포함 할 수 있으며 두 경우 모두 최종 결과에 논리적으로 반영되지 않고 소스 코드에 액세스 할 때만 표시되는 주석이라는 점을 기억하십시오. 도움이됩니다.

스타일 시트에 항상 재설정 적용

각 브라우저에는 기본 스타일 시트가 있으므로 페이지를 보는 브라우저에 따라 오류나 변경을 방지하려면 매우 유용하며 다음을 수행하는 것이 좋습니다. 스타일 시트 재설정. 몇 가지 대안이 있습니다. Eric Meyer의 스타일 시트 재설정은 매우 좋은 옵션이 될 수 있습니다.

가장 효과적인 도구 선택

웹 사이트 디자인 작업시 최대한 효율적으로 사용할 수있는 도구가 많이 있습니다. 와이어 프레임 생성에서 사이트 구조 개발 및 다음을 포함한 모든 종류의 애플리케이션 개발에 이르기까지 Adobe Photoshop, Illustrator 또는 Fireworks. 또한 많은 전문 편집자가 가장 추천하는 편집자 중 하나입니다 (적어도 제가 사용하는 편집자). Sublime Text 또는 실패하면 Adobe Dreamweaver 바로 가기 시스템과 자동 완성 시스템을 통해 코드로 작업 할 수있을뿐만 아니라 개성이 높은 매우 간단한 인터페이스를 제공하기 때문에 사용하는 시간의 70 % 이상을 절약 할 수 있습니다. 전통적인 일반 텍스트의 편집자.