클린 코드: HTML/CSS 에센셜이 여전히 중요한 이유
게시 됨: 2022-03-1115년 동안 웹 개발 경험을 하는 동안 엔터프라이즈 수준에서 스타트업에 이르기까지 다양한 회사와 함께 일했으며 그 과정에서 수많은 동료 소프트웨어 엔지니어와 함께 일했습니다. 내 프로젝트에서 만난 가장 일반적이고 중요한 문제 중 하나는 깨끗하고 이해하기 쉬운 코드를 작성하지 못한 것 입니다.
일류 회사의 최고의 개발자라도 항상 모범 사례를 따르고 정리 및 최적화할 수 있는 코드를 작성하지는 않습니다.
지저분하고 더러운 코드의 결과
깨끗한 코드 원칙을 논의하는 오래되었지만 여전히 관련성이 있는 블로그 게시물을 인용하려면:
소스 코드는 금융 부채와 유사합니다. 당신이 살 집을 사고 싶다고 가정해 보십시오. 대부분의 사람들은 집값을 현금으로 지불할 재정적 여유가 없으므로 대신 모기지를 받습니다. 그러나 모기지 자체는 가지고 있는 것이 좋은 것이 아닙니다. 책임입니다. 매달 빚에 대한 이자를 내야 한다…
웹 개발에서도 마찬가지입니다. 코드에는 지속적인 비용이 있습니다. 그것을 이해해야 하고, 유지해야 하고, 시간이 지남에 따라 새로운 목표에 적응해야 합니다. 코드가 많을수록 지속적인 비용이 커집니다. 우리의 비즈니스 목표를 달성할 수 있으면서도 가능한 한 적은 소스 코드를 갖는 것이 가장 좋습니다.
그러나 추상에 연연하지 맙시다. 이 기사에서는 필수적인 클린 코드 원칙, 코드를 구성하는 데 사용되는 다양한 기술, 유지 관리, 확장성 및 디버그를 더 쉽게 만드는 방법을 다룹니다.
품질 코드는 기본 코드 스타일 지정에서 시작하여 재사용 가능한 블록이 많은 HTML/CSS로 대규모 앱을 작성할 때 모범 사례로 확장되며 더 큰 암시적 가독성을 만들기 위한 명명 규칙과 타사 프레임워크 및 모범 사례에 대해서도 논의합니다.
이 글을 다 읽었을 때 품질 코드의 기본 사항과 HTML 및 CSS 코드를 유지 관리하고 확장하기 쉽게 만드는 방법을 잘 이해하고 있을 것입니다.
코드 스타일링 필수 사항
W3C 유효성, 명명 규칙, 파일 구조 등 좋은 HTML 및 CSS 코드의 기본 사항부터 시작하겠습니다.
첫날부터 구조에 유의하십시오.
큰 앱을 개발하려면 파일 구조를 관리해야 합니다. 다음과 같이 보일 수 있습니다.
유효성 검사기를 사용하여 코드를 확인하십시오.
항상 HTML 및 CSS 유효성 검사기를 사용하십시오.
잘못된 코드:
<figure> <div> <img src="demo.jpg" alt=""> <figcaption> <h2>Hello world</h2> </figcaption> </div> </figure> <picture> <source src="demo.webp" type="image/webp"> <img src="demo.jpg" alt=""> </picture> <details> <header> <summary>Expand details</summary> </header> <p>All content goes here</p> </details> p { font: 400 inherit/1.125 serif; }좋은 코드:
<figure> <img src="demo.jpg" alt=""> <!-- figcaption should be child of element figure element, not div --> <figcaption> <h2>Hello world</h2> </figcaption> </figure> <picture> <!-- source should have srcset attribute --> <source type="image/webp"> <img src="demo.jpg" alt=""> </picture> <details> <!-- summary is not allowed as child of header --> <summary>Expand details</summary> <p>All content goes here</p> </details> p { font-weight: 400; font-size: inherit; line-height: 1.125; font-family: serif; } 깨끗한 코드 원칙 유효성을 위해 <img> 태그에 대체 텍스트를 사용하십시오.
이 속성은 SEO, 검색 엔진, 웹 크롤러, 스크린 리더 등에 중요한 역할을 합니다.
잘못된 코드:
<img src="demo.jpg">좋은 코드:
<img src="demo.jpg" alt="This is placeholder of the image">케밥 케이스(척추 케이스)를 사용합니다.
이름 kebab-case ( spine spinal-case )를 사용하고 camelCase 또는 under_score 를 사용하지 마십시오. BEM을 사용할 때만 under_score 를 사용합니다. 그러나 Bootstrap을 사용하는 경우에는 일관성을 유지하고 구분 기호 - 사용하는 것이 좋습니다.
잘못된 코드:
<section class="section_featured_Listing"> <h1 class="largeTitle">H1 title</h1> </section>좋은 코드:
<section class="section-featured-listing"> <h1 class="large-title">H1 title</h1> </section> kebab-case 는 camelCase 및 under_score 보다 읽기 쉽습니다.
누구나 이해할 수 있는 의미 있는 이름을 사용하고 짧게 유지합니다.
클래스의 이름은 .noun-adjective 와 같아야 합니다.
내용 특정 이름을 작성하는 대신 클래스의 일반적인 이름을 사용하십시오. 코드를 더 읽기 쉽게 만듭니다.
잘못된 코드:
<div class="team-wrapper"> <button class="large-button-green"></button> <p class="greenText-john-smith-description"></p> <div class="white-bg"></div> </div>좋은 코드:
<div class="section-team"> <button class="btn-lg btn-success"></button> <p class="text-success"></p> <div class="bg-white"></div> </div>HTML5에서 스타일시트 및 스크립트에 대한 유형 속성을 작성하지 마십시오.
HTML5에서는 필요 하지 않지만 HTML4/XHTML의 W3C 표준에서는 필요합니다.
잘못된 코드:
<link type="text/css" rel="stylesheet" href="../styles.css"> <script type="text/javascript" src="..//main.js"></script>좋은 코드:
<link rel="stylesheet" href="styles.css"> <script src="app.js"></script>필요한 경우 특정 클래스를 사용합니다.
CSS 선택기를 보다 구체적으로 유지하고 필요한 요소를 선택하십시오. 필요하지 않은 경우 부모를 언급하지 마십시오. 코드를 더 빠르게 렌더링하고 향후 관리 장애물을 제거할 수 있습니다.
잘못된 코드:
section aside h1 span { margin-left: 25%; }좋은 코드:
.left-offset { margin-left: 25%; }대상 요소에 클래스를 적용하면 HTML 내에 더 많은 코드가 생성될 수 있지만 코드가 더 빨리 렌더링되고 관리 장애물이 제거됩니다.
동일한 블록에 다른 스타일을 부여하려면 상위 요소에 클래스를 추가하십시오.
동일한 블록을 사용하지만 다른 스타일을 사용해야 하는 경우 HTML을 최대한 그대로 유지하십시오. 부모 요소에 하나의 클래스를 추가하고 CSS에서 해당 클래스의 자식에 모든 새로운 스타일을 적용하기만 하면 됩니다.
잘못된 코드:
<article> <h1>Same section with another styles</h1> <p>Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum. </p> … </article> <article class=”another-article”> <h1 class=”other-styling-title”>Same section with another styles</h1> <p>Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum. </p> … </article> article { padding: 10px 15px; h1 { font-size: 32px; color: #ff0000; } } .another-article { padding-bottom: 30px; border-bottom: 4px solid #ccc; } h1.other-styling-title { font-size: 20px; }좋은 코드:
<article> <h1>Same section with another styles</h1> <p>Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum. </p> … </article> <article class=”other-styling”> <h1>Same section with another styles</h1> <p>Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum. </p> … </article> article { padding: 10px 15px; h1 { font-size: 32px; color: #ff0000; } &.other-styling { padding-bottom: 30px; border-bottom: 4px solid #ccc; /* you will have less classes */ h1 { font-size: 20px; } } }0 값에서 단위를 삭제합니다.
단위를 추가할 필요가 없으며 추가 가치를 제공하지 않습니다. 0px, 0em, 0% 또는 기타 0 값 사이에는 차이가 없습니다. 값이 여전히 0이기 때문에 단위는 중요하지 않습니다.
잘못된 코드:
div { margin: 20px 0px; letter-spacing: 0%; padding: 0px 5px; }좋은 코드:
div { margin: 20px 0; letter-spacing: 0; padding: 0 5px; } hr 태그를 추가할 수 있는 경우 CSS에서 border-bottom 을 작성하지 마십시오.
CSS에서 새 선택기를 작성하고 테두리 스타일을 추가하는 대신 hr 태그를 사용하십시오. 코드를 보다 마크업 기반으로 만들고 이것이 우리가 하려는 것입니다.
잘못된 코드:
<p class="border-bottom">I want this section to have a border.</p> <p>Lorem ipsum</p> .border-bottom { border-bottom: 1px solid #000; }좋은 코드:
<p>I want this section to have a border.</p> <hr> <p>Lorem ipsum</p> // If necessary change hr variable in bootstrapA > B 선택기를 사용합니다.
직계 자식에게만 규칙을 적용하는 A > B 선택기를 사용하는 것이 매우 유용합니다. 이 경우 해당 스타일이 필요하지 않은 다른 모든 자식의 스타일을 재설정할 필요가 없습니다. 예를 들어, 중첩 메뉴를 코딩할 때 매우 유용합니다. 하위 메뉴 스타일을 재정의할 필요가 없습니다.
잘못된 코드:
<ul> <li>List 1</li> <li>List 2</li> <li>List 3 <ul> <li>Submenu 1</li> <li>Submenu 2</li> </ul> </li> </ul> ul li { list-style-type: none; } li ul li { /* redefine to default value */ list-style-type: disc; }좋은 코드:
<ul> <li>List 1</li> <li>List 2</li> <li>List 3 <ul> <li>Submenu 1</li> <li>Submenu 2</li> </ul> </li> </ul> ul > li { list-style-type: none; }깨끗한 HTML을 작성하는 방법
HTML로 넘어가면 프론트엔드를 강력하고 쉽게 유지 관리하는 것이 우선 순위가 될 것입니다.
가능한 한 마크업 기반의 프론트 엔드를 갖도록 노력하십시오.
CSS를 너무 많이 작성하는 대신 프론트 엔드 코드를 마크업 기반으로 만드십시오.
이것은 검색 엔진을 돕고 코드를 더 읽기 쉽게 만들어 잠재적으로 검색 순위와 사용자 경험을 향상시킵니다.
잘못된 코드:
<div class="main-content"> <p class="content-title">Main text title</p> <img src="http://via.placeholder.com/150x150" alt="example"> <p class="image-description">Here is image description</p> </div>좋은 코드:
<main> <h1>Main text title</h1> <figure> <img src="http://via.placeholder.com/150x150" alt="example"> <figcaption> Here is image description </figcaption> </figure> </main>HTML에서 불필요한 래퍼를 사용하지 마십시오.
HTML에서 불필요한 래퍼 요소를 사용하지 마십시오. 수많은 <div> 및 <span> 요소를 갖는 것은 과거의 일입니다. 세분화되고 선형으로 유지하면 최소한의 코드를 달성할 수 있습니다(다음 항목 참조).
잘못된 코드:
<section class=”container”> <div class=”row”> <div class=”col-xs-12”> <div class=”inner-wrapper”> <span>Unnecessary br tags</span> </div> </div> </div> </section>좋은 코드:
<section class=”container”> <p>Unnecessary br tags</p> </section>스타일 지정을 위해 원자 클래스를 사용합니다.
사용자 정의 색상이나 글꼴 크기를 사용하지 마십시오(색상 또는 글꼴 크기가 프레임워크에 없으면 원자 클래스를 추가하기만 하면 됩니다). 원자 클래스는 단순하고 단일 목적의 스타일 단위입니다. 인라인 스타일과 마찬가지로 Atomic 스타일은 단일 스타일 선언만 적용합니다.
잘못된 코드:
<h1>Without using atomic class</h1> <p>Paragraph without atomic class</p> <section> <h1> Another h1 text</h1> <p>Paragraph inside div without class</p> </section> h1 { color: red; } section > h1 { color: blue; }좋은 코드:
<h1 class="text-red">Without using atomic class</h1> <p>Paragraph without atomic class</p> <section> <h1 class="text-blue"> Another h1 text</h1> <p>Paragraph inside div without class</p> </section> .text-red { color: red; } .text-blue { color: blue; }세분화되고 원자적인 클래스를 유지하고 필요할 때 사용하십시오. 결과적으로 프론트 엔드는 마크업 기반이 됩니다.
의미론적 요소를 사용하십시오.
의미 체계를 사용하면 더 나은 구조를 제공하고 코드와 콘텐츠를 더 쉽게 읽을 수 있습니다.
잘못된 코드:
<span class="heading"><strong>Welcome</strong></span> <span>This is unnecessary br tag.</span>좋은 코드:
<h1>Welcome</h1> <p>This is unnecessary br tag.</p>HTML5 태그를 사용하세요.
새로운 태그는 표현의 자유도를 높이고 공통 요소를 표준화하여 문서의 자동화된 처리를 개선합니다. 다음은 모든 요소의 확실한 목록입니다. 나는 많은 개발자들이 항상 <div> 와 <span> 을 많이 사용한다는 것을 발견했지만 먼저 여기에서 어떤 태그가 귀하의 컨텍스트에 논리적으로 맞는지 확인하십시오.
잘못된 코드:
<div class="article-blue"> <div class="article-title-red">HTML 4 title</div> <div class="content"> Semantics <span class="boldtext">are</span> important. </div> </div>좋은 코드:
<article> <h1>HTML5 title</h1> <p> Semantics <strong>are</strong> important. </p> </article>결론: HTML5의 새로운 요소를 배우고 사용하십시오. 노력할 가치가 있습니다!
CSS: 깨끗한 코드와 전처리기
CSS와 관련하여 독창적이면서도 뻔한 조언으로 시작하지 않는 것은 어렵습니다.
CSS 전처리기를 사용합니다.
Sass는 세계에서 가장 성숙하고 안정적이며 강력한 전문가급 CSS 확장 언어입니다.
Sass에는 두 가지 구문을 사용할 수 있습니다. 첫 번째는 SCSS(Sassy CSS)로 알려져 있고 이 참조 전체에서 사용되는 CSS 구문의 확장입니다. 들여쓰기된 구문(또는 "Sass"라고도 함)으로 알려진 두 번째 및 이전 구문은 CSS를 작성하는 보다 간결한 방법을 제공합니다.
선택기를 그룹화하십시오. SASS에서 @extend를 사용하십시오.
선택자를 그룹화하거나 SASS에서 @extend 를 사용하여 코드를 DRY 상태로 유지하는 데 도움이 되어야 합니다(자신을 반복하지 마십시오).
잘못된 코드:
p { font-size: 22px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1 { font-size: 41px; color: #000; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }좋은 코드:
.font-smoothing { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } p { font-size: 22px; @extend .font-smoothing; } h1 { font-size: 22px; @extend .font-smoothing; }CSS에서 픽셀 대신 rem 단위를 사용하십시오.
예를 들어 루트 <html> 요소의 font-size 크기를 기반으로 만드는 글꼴 크기와 같이 크기와 간격에 REM을 사용합니다. 또한 루트 글꼴 크기를 변경하여 전체 프로젝트를 빠르게 확장할 수 있습니다(예: 특정 미디어 쿼리/화면 크기에서).
반응형 보기에 대해 더 적은 코드를 작성할 것입니다.
잘못된 코드:
p { font-size: 22px; padding: 10px; } @media (max-width: 767px) { p { font-size: 16px; padding: 5px; } }좋은 코드:
html { font-size: 14px; } @media (max-width: 767px) { html { font-size: 12px; } } p { font-size: 1.6rem; padding: 1rem; }CSS에서 높이나 너비가 고정되지 않도록 하십시오.
CSS에서 높이나 너비가 고정되지 않도록 하십시오. 높이는 내부 콘텐츠 + 패딩을 사용하여 생성할 수 있으며 너비는 그리드 시스템으로 정의할 수 있습니다(필요한 경우 중첩 그리드 사용).
잘못된 코드:
<footer class="text-center"> <h2>Let's Get In Touch!</h2> <hr> <p>Ready to start your next project with us?</p> </footer> #footer { height: 130px; }좋은 코드:
<footer class="text-center"> <h2>Let's Get In Touch!</h2> <hr> <p>Ready to start your next project with us?</p> </footer> #footer { padding-top: 23px; padding-bottom: 47px; }SCSS에서 상위 항목을 한 번만 사용해야 합니다.
CSS 전처리기를 사용하고 섹션에 대한 스타일을 작성할 계획이라면 CSS의 상위 항목을 한 번만 사용하고 모든 하위 요소와 미디어 쿼리를 괄호 안에 포함해야 합니다. 이렇게 하면 나중에 변경할 때 기본 부모 요소를 한 곳에서 쉽게 찾고 수정할 수 있습니다.
잘못된 코드:
.section-parent-class { position: relative; h2 { color: #ff0; } header { margin: 2rem 1rem; } } @media (max-width: 767px) { .section-parent-class { footer { padding: .5rem; } } }좋은 코드:
.section-parent-class { position: relative; h2 { color: #ff0; } header { margin: 2rem 1rem; } footer { @media (max-width: 767px) { padding: .5rem; } } }CSS 규칙을 작성하기 전에 어떤 요소가 영향을 받을지 생각해 보세요.
CSS 규칙을 작성하기 전에 항상 어떤 요소가 영향을 받을지 생각하십시오. 변경 사항이 일반적이지 않은 경우 특정 요소에만 영향을 미치고 다른 요소에는 영향을 미치지 않는 방식으로 규칙을 작성하십시오.
잘못된 코드:
/* Commonly used class */ .title { color: #008000; }좋은 코드:
/* Specify it not to affect other titles */ .section-blog .title { color: #008000; }새 규칙을 작성하기 전에 기존 CSS 규칙과 변수를 찾아보십시오.
사용자 정의 CSS와 프레임워크 모두에서 원하는 스타일에 맞는 기존 규칙을 항상 찾으십시오. 적절한 것이 없는 경우에만 새로 작성을 진행하십시오.
이것은 큰 앱으로 작업할 때 특히 중요합니다.
잘못된 코드:
.jumbotron { margin-bottom: 20px; }좋은 코드:
// change $jumbotron-padding from _variables.scss .jumbotron { margin-bottom: $jumbotron-padding; }특정 규칙을 사용합니다.
배경에 하나의 속성이 있으면 해당 속성을 지정하지만 배경 속성이 다른 경우에는 하나의 선언을 제공할 수 있습니다.
잘못된 코드:
.selector { background: #fff; }좋은 코드:
.selector { /* This way background image will not be overwritten if there is any */ background-color: #fff; }약식 속성과 값을 사용합니다.
더 많은 속기 속성과 값을 사용하기 위해 최선을 다하십시오. 속기 속성을 사용하면 간결하고 훨씬 더 읽기 쉬운 스타일 시트를 작성하여 귀중한 시간과 에너지를 절약할 수 있습니다.
잘못된 코드:
img { margin-top: 5px; margin-right: 10px; margin-bottom: 25px; margin-left: 10px; } button { padding: 0 0 0 20px; }좋은 코드:
img { /* Shorthand style */ margin: 5px 10px 25px; } button { /* Don't play with shorthand too much */ padding-left: 20px; } 줄 높이에 px 대신 em 을 사용하십시오.
em 및 px 단위를 사용하면 디자인에 유연성을 제공하고 고정된 크기에 얽매이지 않고 요소를 확장 및 축소할 수 있습니다. 이러한 유연성을 사용하여 개발 중에 디자인을 더 쉽게 조정하고 응답성을 높일 수 있을 뿐만 아니라 브라우저 사용자가 최대 가독성을 위해 사이트의 전체 규모를 제어할 수 있습니다.
잘못된 코드:
p { font-size: 12px; line-height: 24px; }좋은 코드:
p { font-size: 12px; line-height: 2em; /* or just line-height: 2; */ }가능한 한 부트스트랩 클래스를 사용하십시오.
이 규칙은 일반적으로 UI 프레임워크에 적용될 수 있지만 부트스트랩은 세계에서 가장 인기 있는 프론트 엔드 구성 요소 라이브러리이기 때문에 예제로 사용하고 있습니다.
부트스트랩을 사용하면 준비된 클래스를 많이 사용할 수 있으므로 작업이 더 쉬워집니다. 가능한 한 부트스트랩 클래스를 사용하여 HTML 기반 마크업을 더 많이 만드십시오.
잘못된 코드:
<section class="without-bootstrap"> <div class="first-column">Lorem ipsum dolor sit amet, ut ius delenit facilisis</div> <div class="second-column">Lorem ipsum dolor sit amet, ut ius delenit facilisis</div> </section> .first-column, .second-column { width: 25%; float: left; padding-left: 15px; padding-right: 15px; } ...좋은 코드:
<section class="row"> <div class="col-md-6">Lorem ipsum dolor sit amet, ut ius delenit facilisis</div> <div class="col-md-6">Lorem ipsum dolor sit amet, ut ius delenit facilisis</div> </section>프레임워크를 적절하게 사용자 정의하십시오.
부트스트랩은 variables.scss 파일을 사용하므로 한 줄의 코드를 작성하지 않고도 프런트 엔드를 쉽게 구성하고 사용자 지정할 수 있습니다. 그렇지 않고 모든 사용자 지정을 직접 수동으로 작성하려는 경우 프레임워크를 전혀 사용하지 않는 것이 좋습니다.
일부 개발자는 많은 번거로움 없이 부트스트랩을 새 버전으로 업그레이드할 수 있을 것이라고 생각하여 변수.scss 변경을 피하지만 지루한 작업이 될 수 있습니다. 사소한 업데이트라도 개발자는 변경 로그를 읽고 모든 마크업과 CSS를 살펴보고 새 버전으로 수동으로 마이그레이션해야 합니다.
잘못된 코드:
navbar { padding: 20px 10px; } .carousel-indicators { li { width: 6px; height: 6px; margin-right: 3px; margin-left: 3px; } }좋은 코드:
$navbar-padding-y: ($spacer / 2) !default; $navbar-padding-x: $spacer !default; $carousel-indicator-width: 30px !default; $carousel-indicator-height: 3px !default; $carousel-indicator-spacer: 3px !default; .container 너비를 덮어쓰지 마십시오.
.container 의 너비를 덮어쓰지 마십시오. 대신 그리드 시스템을 사용하거나 _variables.scss 에서 컨테이너 너비를 변경하십시오. 너비를 줄여야 하는 경우 너비 대신 최대 너비를 사용하세요. 이 경우 Bootstrap의 .container 는 반응형 보기에서 그대로 유지됩니다.
잘못된 코드:
.container { @media (min-width: $screen-lg-min) { width: 1300px; } }좋은 코드:
// change $container-lg from _variables.scss .container { @media (min-width: $screen-lg-min) { width: $container-lg; } }Bootstrap 4 클래스를 사용하고 CSS를 적게 작성하십시오.
베타 버전이지만 Bootstrap 4를 사용하십시오. 여기에는 레이아웃, 특히 Flexbox 및 스페이서를 더 빠르게 생성하는 데 도움이 되는 많은 새로운 클래스가 포함되어 있습니다.
잘못된 코드:
<div class="flex-ex"> <div>Flex item 1</div> <div>Flex item 2</div> <div>Flex item 3</div> </div> <div class="flex-ex flex-reverse"> <div>Flex item 1</div> <div>Flex item 2</div> <div>Flex item 3</div> </div> .flex-ex { display: flex; > div { padding: 2px; } &.flex-reverse { flex-direction: row-reverse; } li { list-style: none; padding: .5rem; } }좋은 코드:
<ul class="list-unstyled list-inline d-flex flex-row"> <li class="p-2">Flex item 1</li> <li class="p-2">Flex item 2</li> <li class="p-2">Flex item 3</li> </ul> <ul class="list-unstyled list-inline d-flex flex-row-reverse"> <li class="p-2">Flex item 1</li> <li class="p-2">Flex item 2</li> <li class="p-2">Flex item 3</li> </ul>이제 요소에 클래스를 할당하여 모든 테두리 또는 일부 테두리를 제거할 수 있습니다.
잘못된 코드:
<div class="border-example2 py-5"> <span class="border0"></span> <span class="border-top0"></span> <span class="border-right0"></span> <span class="border-bottom0"></span> <span class="border-left0"></span> </div> border-example2 { > span { width: 100px; height: 100px; display: inline-block; margin: .50rem; background-color: #e1e1e1; border: 1px solid; &.border0 { border: none; } &.border-top0 { border-top: none; } &.border-right0 { border-right: none; } &.border-bottom0 { border-bottom: none; } &.border-left0 { border-left: none; } } }좋은 코드:
<div class="border-example py-5"> <span class="d-inline-block m-2 border-0"></span> <span class="d-inline-block m-2 border-top-0"></span> <span class="d-inline-block m-2 border-right-0"></span> <span class="d-inline-block m-2 border-bottom-0"></span> <span class="d-inline-block m-2 border-left-0"></span> </div> .border-example { > span { width: 100px; height: 100px; background-color: #e1e1e1; border: 1px solid; } } .col-md-X 와 .col-lg-X 값이 같으면 .col-sm-X 를 사용하세요.
.col-sm-X .col-md-X 및 .col-lg-X 를 작성하지 마십시오. 예를 들어 .col-lg-10 을 작성할 필요가 없습니다. 왜냐하면 .col-md-10 , .col-lg-10 을 자동으로 포함합니다.
잘못된 코드:
<ul class="press-list list-inline row"> <li class="col-lg-4 col-md-4 col-sm-4 col-xs-6"><a href="#"><img class="img-fluid" src="assets/images/press/press-1.png" alt=""></a></li> <li class="col-lg-4 col-md-4 col-sm-4 col-xs-6"><a href="#"><img class="img-fluid" src="assets/images/press/press-2.png" alt=""></a></li> </ul>좋은 코드:
<ul class="press-list list-inline row"> <li class="col-md-4 col-xs-6"><a href="#"><img class="img-fluid" src="assets/images/press/press-1.png" alt=""></a></li> <li class="col-md-4 col-xs-6"><a href="#"><img class="img-fluid" src="assets/images/press/press-2.png" alt=""></a></li> </ul> .col-xs-12 사용하지 마십시오.
.col-xs-X 가 할당되지 않으면 기본적으로 .col-xs-12 -12가 되기 때문에 .col-xs-12 사용하지 마십시오.
잘못된 코드:
<section> <div class="container"> <div class="row"> <div class="col-lg-12 text-center"> <h2>Services</h2> <h3 class="text-muted">Lorem ipsum dolor sit amet consectetur.</h3> </div> </div> <div class="row text-center"> <div class="col-md-6 col-xs-12"> <h4>E-Commerce</h4> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing.</p> </div> </div> </div> </section>좋은 코드:
<section class="text-center"> <div class="container"> <h2>Services</h2> <h3 class="text-muted">Lorem ipsum dolor sit amet consectetur.</h3> <div class="row"> <div class="col-md-6"> <h4>E-Commerce</h4> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing.</p> </div> </div> </div> </section> reset.css 를 사용하지 마십시오. 대신 normalize.css 를 사용하십시오.
부트스트랩을 사용하는 경우 normalize.css 가 이미 포함되어 있으므로 두 번 포함할 필요가 없습니다.
모범 사례가 아니더라도 지침을 따르십시오.
일관성을 위해 항상 처음 시작한 규칙과 지침(이름 지정, 코드 스타일 또는 파일 구조에 관한 것인지 여부)을 따르는 것이 좋습니다.
마무리
도움이 되는 정보를 얻을 수 있었고 모범 사례를 사용하여 최소한의 HTML 및 CSS 코드를 작성하는 방법에 대해 더 많이 생각할 수 있기를 바랍니다.
큰 회사의 경우 코드가 지저분할 때 큰 응용 프로그램을 유지 관리하기가 매우 어렵습니다. 물론 대기업은 좋은 품질을 위해 지불할 돈이 있습니다. 클린 코딩 원칙을 따르면 좋은 직업을 가질 확률이 높아집니다. 프리랜스 측면도 언급할 가치가 있습니다. 여러 프로젝트와 클라이언트를 저글링하는 전문가는 다른 개발자에게 즉시 전달할 수 있는 깨끗한 코드를 제공해야 합니다 .
코딩 프로세스 자동화, Gulp/Grunt 작업, Linters, Editor 플러그인, 코드를 생성하는 도구, 사용자 대신 코드를 작성하는 AI 도구 및 기타 관련 주제.
흥미롭고 유익한 글이 되었기를 바랍니다. 코딩 노력에 행운을 빕니다.
Toptal 엔지니어링 블로그에 대한 추가 정보:
- CSS에서 SVG 애니메이션에 접근하는 방법