콘텐츠
- 01. 파일 순서 및 구조 추가
- 02. 기본 CSS 파일 빌드
- 03. 레이아웃을 다른 CSS와 분리
- 04. 모듈 식으로 CSS 작성
- 05. 긴 선택기 체인을 피하십시오
- 06. 원칙을 잊지 마세요
우리 모두 거기에있었습니다. 최신 CSS 스펙타클 한 styles.css 파일을 천천히 열면 길이가 2,000 줄이고 변경해야하는 클래스가 중간에있는 것을 알 수 있습니다.
당신은 혼자이고 겁이 났고 완전히 다른 페이지에서 무언가를 무너 뜨릴 수 있기 때문에 그 수업을 편집해도 괜찮을지 모릅니다. 마지막 수단으로 파일 끝으로 이동하여 이미 7 개의 다른 클래스가있는 요소에 붙일 새 클래스를 만듭니다. 이는 CSS로 충분히 오랫동안 작업해온 모든 개발자에게 일반적인 경험입니다 (CSS에 대한 영감을 얻으려면 가장 좋아하는 CSS 애니메이션 예제 참조).
그럼 좋은 CSS를 작성할 때 목표가 무엇인지 이야기 해 봅시다. 목표는 영리하고 복잡한 규칙을 만드는 것이 아닙니다. 가능한 한 광범위하게 적용 할 수 있도록 선택기 문자열을 엔지니어링하는 것이 아닙니다. 좋은 CSS의 목표는 간단하고 모듈 식이며 가장 중요한 것은 쉽게 유지 관리 할 수있는 규칙을 작성하는 것입니다. 여기에서는 건강한 코드베이스를 만들고 유지하는 데 도움이되는 간단하고 스마트 한 규칙을 제공합니다.
더 많은 웹 디자인 조언이 필요하다면 웹 사이트 레이아웃, 웹 호스팅 서비스 및 최고의 웹 디자인 도구에 대한 페이지를 놓치지 마십시오. 곧 새로운 사이트가 생겼지 만 코딩하고 싶지 않으세요? 완벽한 웹 사이트 빌더를 선택하십시오.
01. 파일 순서 및 구조 추가
먼저, 개발자간에 합의 된 구조에 따라 스타일을 자체 CSS 파일로 분할 한 다음이를 고수하는 것을 고려하십시오. 잘못 구성된 스타일 폴더를 여는 것은 끔찍한 경험입니다. 어떤 스타일이 어떤 파일에 있고 한 스타일을 변경하면 다른 파일에 어떤 영향을 미치는지 알 수 없습니다. 모든 단일 스타일에 고유 한 파일을 부여한 다음 모두 연결하거나 끝에서 하나로 축소하면 서버가 신경 쓰지 않는다는 것을 기억하십시오.
귀하의 사이트는 매우 느리게로드되지만 서버는 읽기를 잘 처리합니다. 파일 구조는 사람을위한 것이며 파일 구조가 가치를 제공하지 않는 경우 다시 고려해야합니다.
파일을 구조화하는 가장 혼란스러운 방법 중 하나는 페이지 단위입니다.정보 페이지에서 작업 중이고 수정이 필요한 사항이 있으면 about.css 파일로 이동합니다. 이렇게하면 about.css 외부의 스타일에 영향을 미치는 문제를 방지 할 수 있습니다. 그런 다음 about.css 파일의 변경 사항을 확인하기 만하면됩니다.
그래도 파일 길이 문제는 해결되지 않습니다. 상당히 긴 페이지에는 쉽게 1,000 줄 이상의 CSS가있을 수 있습니다. 내부적으로 파일을 구조화하는 것이이를 완화하는 방법입니다. 파일 내에서 알파벳순으로 정렬하면 C로 시작하는 항목을 검색 할 때 해당 항목이없는 경우 해당 항목이 포함되지 않은 것임을 의미합니다.
이미 존재하는 스타일에도 적용됩니다. 모든 것을 알파벳순으로 그룹화하면 스타일이 파일 전체에 서너 번 작성되었는지 확인할 수 있습니다.
.boundingBox {padding : 1rem; } / * .contactHeader가 있으면 여기로 이동합니다. 존재하지 않기 때문에 존재하지 않는다고 안전하게 가정 할 수 있습니다. * / .headerChildren {padding : 10px 5px; 배경 : #ccc; }
02. 기본 CSS 파일 빌드
모든 스타일이 한 페이지에만 속하지는 않으며 여러 페이지에 스타일이있는 것이 일반적입니다. 또한 웹 사이트뿐만 아니라 비즈니스 전반에 적용되는 스타일을 갖는 것도 일반적입니다. 여기에서 실제로 어떤 것도 속하지 않는 매우 일반적인 스타일을 작성합니다. 예를 들어 사용할 다양한 색상, 글꼴, 타이포그래피 및 사이트 별 재설정 등이 있습니다.
이 섹션에 버튼, 양식 요소 및 경고 스타일과 같은 기본 구성 요소와 유사한 스타일을 포함 할 수도 있습니다. 이 섹션을 사이트의 스타일 가이드로 생각하십시오. 이렇게하면 사이트에 CSS를 더 쉽게 유지 관리 할 수있을뿐만 아니라 스타일이 균일하게 적용됩니다.
여기에는 머리글이나 바닥 글과 같이 여러 페이지에서 반복되는 사이트 섹션에 속하는 스타일을 포함 할 수 있습니다. 이러한 섹션에 많은 양의 스타일이있는 경우 header.css 및 footer.css와 같은 자체 파일로 구분하는 것이 도움이 될 수 있습니다.
실제로 속하지 않는 파일에 스타일을 포함하지 않도록주의하세요. 지저분한 폴더 구조는 CSS를 유지하기 어렵게 만드는 좋은 방법이라는 것을 기억하십시오.
03. 레이아웃을 다른 CSS와 분리
SMACSS에 익숙한 사용자는 레이아웃 스타일을 사이트에 적용 할보다 일반적인 스타일과 분리 할 수 있다는 생각에 익숙 할 것입니다. CSS의 나머지 부분에서 이러한 스타일을 분리하면 서로 다른 섹션이 어떻게 보이는지에 더 쉽게 집중할 수 있고 섹션이 가까운 섹션에 비해 어떻게 작동해야하는지에 더 집중할 수 있습니다.
이것은 인기있는 부트 스트랩 라이브러리와 같은 그리드 시스템을 추가하거나 직접 구현하여 수행 할 수 있습니다. 많은 디자이너가 사이트를 만들 때 그리드 시스템을 사용하고 가능한 한 그에 가까워지기를 원할 것이기 때문에이 시점에서 사이트 디자이너와 이야기하는 것이 좋습니다.
04. 모듈 식으로 CSS 작성
레이아웃 CSS를 분리하면 CSS를 단순화하는 또 다른 방법이 있습니다. CSS와 관련된 다양한 방법론이 있습니다. 몇 가지 예를 들면 SMACSS, BEM, OOCSS가 있지만 섹션, 부품, 모듈, 구성 요소 또는 블록이라고 부르든 모두 공통점이 있습니다. 즉, 재사용 가능하고 특수한 부분을 스타일 시트에 추가하려고합니다.
그렇게함으로써 우리는 스타일을 가능한 한 DRY (자신을 반복하지 마십시오)로 유지하고 캡슐화를 만듭니다. CSS의 부작용은 큰 문제입니다. 브라우저는 CSS를 참 또는 거짓 방식으로 적용합니다. 스타일이 일치하면 적용되고 그렇지 않으면 건너 뜁니다. 이렇게하면 작성자가 적용하지 않은 스타일이 페이지 모양과 일치하고 변경 될 수 있습니다. CSS를 좀 더 모듈 식으로 작성하면 스타일을 캡슐화하여 이러한 부작용을 줄입니다.
구성 요소 또는 모듈은 함께 그룹화되고 스타일이 서로 영향을 미치는 HTML 섹션입니다. 모듈 식 CSS를 만드는 것은 어떤 것이 그룹에 속하는지 식별 한 다음 주변과 분리하는 것입니다. 이는 외부에 대해 걱정할 필요가 없으며 내부 모듈에 대해서도 걱정할 필요가 없음을 의미합니다.
이를 생성하는 클래스를 다음과 같이 작성할 수 있습니다.
.aboutHeader {} .aboutHeader_topMenu {} .aboutHeader_bottomMenu {}
이 스타일에 실제로 들어가는 것은 중요하지 않지만 전체 헤더, 헤더의 상단 라인 및 하단 라인에서 일어나는 일을 제어 할 수 있습니다. 네임 스페이스를 사용하여 .aboutHeader 클래스는 다른 스타일이 적용되지 않도록합니다.
div class =”aboutHeader”> div class =”aboutHeader_topMenu”> ul> / ul> / div> div class =”aboutHeader_bottomMenu”> ul> / ul> / div> / div>
05. 긴 선택기 체인을 피하십시오
구성 요소를 작성할 때 상대적으로 얕게 유지하기가 쉽고 클래스 선택기에서 2 ~ 3 개의 레이어를 넘지 않습니다. 그러나 일부 구성 요소는 타겟팅하려는 요소에 도달하기 전에 5, 6 또는 더 많은 레이어에 도달하도록 할 수 있습니다.
CSS는 자바 스크립트처럼 문제를 추상화 할 수있는 능력이 없다는 것을 기억하십시오. 제어 흐름이나 기능적 능력이 없습니다. 그래도 좋은 방법이므로 긴 선택기 체인, 깊이 중첩 된 스타일 또는 고도로 일반화 된 스타일을 만들어 모방하지 마세요.
이를 수행하지 않는 방법의 예는 다음과 같습니다.
.homeCTA .titleContainer .title .subheader .list {}
작성 방법은 다음과 같습니다.
하위 헤더 클래스의 이름을 자체 구성 요소로 변경
.subheaderCTA .list {}
위의 '하지 않는 방법'예제와 같은 선택기 체인은 잘못된 스타일을 타겟팅하고 있음을 나타냅니다. 그런 사슬이 실제로 필요한 것은 아닙니다. 대신 구성 요소 내부에 구성 요소가 있으며 직접 대상으로 지정해야 함을 의미합니다. 모듈 식 CSS 캡슐화는 내부에 너무 많이 캡슐화하려고하면 분해됩니다. 즉, 부작용이 다시 나타나기 시작합니다.
06. 원칙을 잊지 마세요
CSS를 만드는 방법은 여러 가지가 있으며 작업하는 각 프로젝트는 약간 씩 다릅니다. 결국 모든 코드베이스에 정밀 검사가 필요한 것은 거의 불가피하지만 이러한 원칙을 사용하여 이러한 문제가 발생하지 않도록 할 수 있습니다. 팀의 일원으로 작업하는 경우 모든 사람이 액세스 할 수있는 안전한 클라우드 저장소에 디자인 파일을 보관해야합니다.
항상 스타일이 건조하고 캡슐화되어 있고 읽기 쉽고 검색 가능한지 확인하는 데 집중해야합니다. 논의 된 원칙을 시작하면 미래에 일을보다 쉽게 유지하고 변경할 수 있습니다.
따라서 파일 시스템과 파일의 순서를 유지하는 것을 잊지 마십시오. 스타일을 네임 스페이스 및 모듈화합니다. 기본 스타일, 레이아웃 스타일 및 일반 스타일을 분리하여 별도의 관심사를 유지하십시오.
마지막으로 스타일을 가능한 한 단순하고 얕게 유지하십시오. 처음으로 새로운 스타일을 작성할 때 어렵지 않아야하며, 만약 그렇다면 해당 섹션을 너무 복잡하게 만들고 있는지 고려하십시오. 처음이 힘들다면 두통이 어떻게 수정 될지 상상해보세요.
이 기사는 원래 323 호에 게시되었습니다. 그물, 웹 디자이너와 개발자를위한 세계에서 가장 많이 팔리는 잡지입니다. 구입 323 호 또는 구독 오늘 그물에.
