유지 관리 가능한 CSS 작성

유지보수 코드는 소프트웨어 개발의 즐거움 중의 하나다.코드 라이브러리를 열고 얼굴과 마음의 미소를 지을 때 얻는 느낌은 거의 값을 매길 수 없다.비록 일부 사람들은 이것이 자바스크립트나 PHP 같은 프로그래밍 코드 라이브러리에만 적용된다고 생각할 수 있지만, 이것은 유지할 수 있는 CSS가 전단 개발자의 즐거움이라는 것을 의미하고, 그들은 CSS에 대해 특정한 약점을 가지고 있다는 것을 의미한다고 생각한다.
내가 글에서 언급한 바와 같이 CSS를 사용하기 시작하는 것은 매우 쉽지만, 당신이 계속됨에 따라, 당신은 이와 같은 용어를 만나게 될 것이다.
코드 라이브러리가 길어질수록 이름과 같은 많은 것을 추적해야 한다.명명약정은 후자를 처리할 수 있고, 좋은 명명은 전자를 처리할 수 있지만, 자신이나 다른 개발자가 현재나 미래에 이 코드 라이브러리를 처리할 수 있도록 더 많은 일을 할 수 있습니다.
그의 책 Edsger W. Dijkstra 중 A discipline of programming 으로 말하자면

... I was forced to admit that most programs are presented in a way fit for mechanical execution but, even if of any beauty at all, totally unfit for human appreciation.

많은 기술들이 CSS 코드 라이브러리를 인류가 감상하기에 적합하게 확보할 수 있다.우리는 그것들을 토론할 것입니다. 당신이 선택하십시오.
이 시리즈의 전통과 반대로 이 글은 코드가 아니라 이론이 더 많다.
유지 관리 가능한 CSS는 모듈식, 확장 및 유지 관리 가능한 CSS 작성에 관한 것입니다.
우리가 모듈화 코드에 대해 이야기할 때, 우리는 웹 페이지의 독립된 부분으로서의 모듈을 가리킨다. 이 모듈들은 다른 부분과 조합하여 웹 페이지의 전체 구조를 만들 수 있다.예제에는 제목과 탐색이 포함됩니다.
다른 한편, 확장성은 현대 코드 라이브러리의 크기가 증가할 때 유지하기 쉽다는 것을 의미한다.
유지보수성은 연쇄반응을 일으키지 않는 상황에서 변경할 수 있다는 것을 의미하며 코드 라이브러리의 다른 곳에 또 다른 문제가 발생할 수 있다.
초보자의 관점에서 볼 때, 다음은 유지 보수 가능한 CSS 작성에 대한 불완전한 건의 목록입니다.

댓글 달기

HTML 사용

의미 클래스 이름 사용

ID 조심

명명 규칙 사용

코드 읽기 가능

평론을 쓰다

주석은 당신 자신이나 다른 개발자의 주석으로 사용할 수 있으며, 그들은 어느 시점에 당신의 코드 라이브러리를 처리할 것입니다.그것들은 잘 썼어야 했고, 지금 벌어지고 있는 일이나 당신이 인코딩 결정을 내린 원인을 묘사해야 했다.
당신은 특정한 문제를 해결하고 있을지도 모른다. 해결 방안이 갑자기 당신의 머릿속에 떠올랐다. 그리고 해결 방안을 계속 실시해라. 봐라!효과가 있다!
이때 당신은 평론에서 실현의 관건적인 부분을 설명해야 합니다.오랜 시간 후에 코드 라이브러리를 열 때, 이 주석들이 안내서일 수도 있다는 것에 놀라서는 안 됩니다.
다음 가설 예제를 예로 들 수 있습니다.

.header {
  /*
   * The margin bottom is applied to create an outer spacing
   * thereby preventing the header from touching the main
   * content.
  */
  margin-bottom: 2em;
}

.box {

  /*
   * The padding property is actually shorthand for four
   * other properties namely padding-top, padding-right
   * padding-bottom, padding-left.
  */
  padding: 3em;
}

다음 트윗은 CSS에 관한 것이 아닐 수도 있지만, 코드 라이브러리의 주석에 대한 중요성을 많이 말했습니다.


알렉스 이오니스 쿠
@ 에오니스 쿠

누가 이 평론을 썼든...1) 고마워요 2) 오늘 배운 게 있어요.나는 이 평론/변경을 추가하기 전에 다른 사람들이 그 평론이 가져오는 고통을 배워야 한다는 것을 느낄 수 있다.이 사람에게 하이파이브:)
2019년 3월 18일 오후 22:02

의미 HTML 사용

의미 HTML은 매우 좋은 HTML로 대량의 무료 접근 기능을 가지고 있다.의미 있는 클래스 이름으로 의미 HTML을 작성할 때 (아래 토론) CSS를 작성하도록 강요하는 것입니다.
다음 예제를 참조하십시오.

<header>
  <h1>Header here</h1>
</header>

<main>
  <section>
    <!--Text here -->
  </section>
</main>

<footer>
  <!-- Footer text here -->
</footer>

... 과 비교하다

<div>
  <h1>Header here</h1>
</div>

<div>
  <div>
   <!-- Text here -->
  </div>
</div>

<div>
  <!-- footer text here -->
</div>

의미 클래스 이름 사용하기

의미 클래스 이름은 HTML 요소의 모양 또는 스타일 대신 용도를 설명합니다.

<!-- this -->

<header class="hero">
  <h1><!--Text here--></h1>
</header>

<main class="site-content">
  <p class="introductory-text"></p>
</main>

<!-- compared to this -->

<div class="f1 pd2 mt3">
  <p class="p1"></p>
</div>

의미 클래스 이름의 몇 가지 장점은 다음과 같다.

쉽게 찾을 수 있음

디버깅 용이

읽기 가능

ID 신중하게 사용

ID 선택기는 클래스 및 속성 선택기보다 특이성이 높습니다.CSS에서 대량의 ID를 사용할 때 덮어쓰기가 어려울 것입니다. 어떤 스타일이 적용되었는지 확인하려면 !important 로 해석해야 합니다.
하나의 사물이 하나의 실례만 있을 때 ID를 사용하고 여러 실례가 있을 때 클래스 선택기를 사용하는 것을 권장합니다.
다음 코드 세그먼트를 지정합니다.

<header id="header">
  <p id="paragraph-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
  <p id="paragraph-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</header>

너는 이렇게 쓸 수 있다.

<!-- There are more than one paragraph so its best to use a class -->

<header id="header">
  <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
  <p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</header>

CSS는 다음과 같습니다.

.paragraph {
  /* Your styles here */
}

두 개의 선택기에서 !important 을 사용하면 전일성이 높은 선택기가 승리할 수 있음을 주의하십시오.

/* specificity 0001 */
article {
  background-color: yellow !important;  /* This will be ignored */
}

/* specificity 0002 */
body article {
  background-color: green !important; /* The browser will use this */
}

명명 규칙 사용

명명 규약은 CSS의 가독성과 유지보수성을 향상시키기 위해 권장되는 규범을 제공합니다.
우리는 이전에 이미 이 문제를 토론한 적이 있으니, 너는 아래의 게시물을 읽을 수 있다.

CSS 명명 규칙

하브두르 하제즈・ 2019년 12월 9일・ 6분 읽기

#beginners #css

코드 읽기 가능

가독성은 유지보수 코드의 취지 중의 하나이다.코드 라이브러리를 보고 자신감을 얻는 능력이 중요하다.

/* This */
.header,.logo{padding:1.2em;margin:2em;width:500px;}

/*compared to this*/
.header,
.logo {
  padding: 1.2em;
  margin: 2em;
  width: 500px;
}

이것들은 단지 조언일 뿐이다. 당신이 더 많은 CSS를 쓸 때, 당신이 유지할 수 있는 CSS를 쓰는 방식을 발견할 수 있을 것이다. 당신이 이렇게 할 때, 당신의 코드 라이브러리를 계승하는 개발자가 그것을 이해하기 어렵다는 것을 발견하지 못할 것이다.
이 주제에 대한 자세한 내용은 다음 리소스를 참조하십시오.

MaintainableCSS

Write better CSS

CSS에 대한 토론은 여기서 끝납니다.다음은 CSS에 대한 자세한 내용은 참조 자료 및 리소스를 참조하십시오.