구문 대 의미론; CSS 클래스 이름 지정

CSS 클래스 이름에 대한 주요 참조와 함께 프로그래밍 언어의 구조 및 의미론의 개념을 간략하게 살펴보겠습니다.

프로그래밍 언어의 구문은 코드의 구조 또는 형식을 지정하는 규칙 모음인 반면, 의미론은 코드의 해석 또는 기호, 문자 또는 프로그램의 일부와 관련된 의미를 나타냅니다. (출처: techdifferences.com)

이런 맥락에서 저는 간단히 말할 수 있습니다.

구문은 클래스 이름을 작성하는 방법을 안내하는 규칙과 관련이 있습니다.
동안,
의미론은 클래스 이름이 의미하는 것으로 해석될 수 있는 것을 나타냅니다.

오늘 넛지의 나머지 부분에서는 구문 및 의미론(S&S)에 대한 이해를 사용하여 질문에 답할 것입니다.

Q1. How do you properly name CSS class properties?

답변
적절하거나 관례적인 CSS 클래스 이름은 S&S의 두 가지 개념을 모두 준수해야 합니다.
즉, 클래스 이름은 CSS 클래스의 명명 규칙을 따라야 하며, 그 의미도 쉽게 해석되어야 합니다.

사용자의 개인 정보가 포함된 div를 고려하십시오.

적절한 CSS 클래스 이름은 다음과 같습니다.

<div class="user-details">...</div>

.user-details { color: #042; }

An improper class naming could be

<div class="p2">...</div>

.p2 { color: #042; }

Q2. If a class name works, does it make it conventional?

답변
주로 개발 속도와 디버깅을 향상시키기 위해 클래스 이름을 지정하는 기존 방법이 있으며 그 중 하나는 BEM(Block Element Modifier의 약자입니다. 자세한 분석은 이전 기사 참조)입니다.

구조나 명명 규칙 없이 개발된 대부분의 CSS 코드가 여전히 작동하더라도 S&S에 대한 지식은 작동하는 모든 코드가 관습적이지 않다는 것을 증명합니다.
위의 예 2를 고려하십시오. 코드는 작동하지만 일반적이지 않습니다.

Semantics의 개념은 쉽게 해석되는 클래스 이름의 사용을 요구합니다. 나는 '해석하기 쉬운' 클래스 이름을 정의하는 데 도움을 주기 위해 내가 작성하는 모든 코드를 다른 개발자가 계속 작업할 것이라고 상상하고 싶습니다.

따라서 기존 클래스 명명에 대한 심층 연구에 시간을 할애하십시오.

이 정보가 도움이 되었기를 바라며, 댓글을 남기고 제 기사를 더 읽고 싶다면 댓글을 남겨주세요.