CSS 코드 리팩토링에 대한 자세한 설명-CSS 튜토리얼-php.cn

이 글은 주로 CSS 코드 리팩토링을 소개하는 내용인데 편집자가 보기엔 꽤 괜찮다고 생각해서 지금부터 참고용으로 올려보겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

1. 리팩토링 및 아키텍처

리팩토링은 코드 동작을 변경하지 않고 더 간결하고 쉽게 재사용할 수 있도록 코드를 다시 작성하는 것을 의미합니다.

아키텍처는 소프트웨어 프로젝트의 다양한 구성 요소가 결합되는 방식을 나타냅니다.

뛰어난 아키텍처:

예측 가능: 소프트웨어의 작동 방식과 구조에 대해 정확한 가정을 할 수 있습니다.
재사용 가능: 다시 작성하지 않고도 동일한 코드를 여러 위치에서 사용
확장 가능: It 새로운 콘텐츠를 추가하기가 더 쉽습니다
유지 관리 가능: 다른 코드를 크게 변경하지 않고 하나의 코드를 수정합니다

2 CSS 선택기의 우선순위

(a, b, c, d)는 다음을 나타냅니다. 우선순위 a>>b>>c>>d, 여기서:

에 인라인 스타일 속성이 있는 경우, a=1이고, 그렇지 않은 경우 a=0
b는 ID 선택기입니다.
의 수
c는 클래스 선택자, 속성 선택자, 의사 클래스의 개수입니다.
d는 유형 선택자와 의사 요소의 개수입니다.

(ps: 의사 클래스와 의사 요소의 차이 )

!important는 우선순위가 가장 높으며 인라인 스타일을 재정의할 수 있습니다. 인라인 스타일 속성에 추가할 수 없습니다.

3. 고품질 CSS 작성 방법

댓글 사용

댓글에 기록된 내용은 다음과 같습니다.

파일 콘텐츠
선택기 종속성 및 사용법
특정 선언을 사용하는 이유 (해킹 등)
더 이상 사용하면 안 되는 더 이상 사용되지 않는 스타일

/*
* 导航链接样式
*
* @see templates/nav.html
*/
.nav-link {
  ...
}

.nav-link:hover {
  border-bottom: 4px solid #333;
  /* 防止增加了4px下边框导致元素移动 */
  padding-bottom: 0;
}

/* @deprecated */
.nav-link {
  ...
}

로그인 후 복사

선택기를 단순하게 유지하세요

/* 不推荐 */
p > nav > ul > li > a {}
/* 不推荐 */
a.nav-link {}
/* 推荐 */
.nav-link {}

로그인 후 복사

모든 시나리오가 표시된 대로 이 권장 사항을 따라야 하는 것은 아닙니다. 입력을 위해 아래 상자의 텍스트와 테두리에 스타일을 추가합니다.

.error {
  color: #f00;
}
input.error {
  border-color: #f00;
}

로그인 후 복사

별도의 CSS와 JavaScript

JavaScript에서 요소를 선택하는 데 사용되는 클래스와 ID는 더 이상 요소의 스타일을 지정하는 데 사용되어서는 안 됩니다. JavaScript로 요소 스타일을 수정할 때는 클래스를 추가하고 삭제해야 합니다.

자바스크립트에만 사용되는 클래스와 ID 앞에 js-를 추가하거나, ID는 자바스크립트에서만 요소를 선택하는 데 사용되고 클래스는 스타일에 사용되는 것을 권장합니다.

ID와 클래스 이름은 의미가 있어야 합니다

더 나은 상자 만들기

상자 크기 계산 방법에는 콘텐츠 상자와 테두리 상자가 포함됩니다. 예를 들어 프로젝트에서는 한 가지 방법을 고수하는 것이 좋습니다.

*,
*::after,
*::before {
}

로그인 후 복사

(ps: ::after 표기법은 CSS3에서 도입되었으며, :: 기호는 의사 클래스와 의사 요소를 구별하는 데 사용됩니다. CSS3를 지원하는 브라우저는 CSS2 :after , IE8에 도입된 표기법도 지원합니다. 지원 :after )

스타일 분류

스타일을 다양한 범주로 구성하면 코드를 더 예측하기 쉽고 효율적으로 사용할 수 있으므로 목적에 따라 스타일을 정의하는 것이 더 나은 아키텍처를 만드는 데 도움이 됩니다.

유니버설 스타일

다양한 브라우저의 기본 스타일이 조금씩 다르기 때문에, 다양한 브라우저에서 일관되게 작동하려면 범용 스타일을 사용하여 다양한 요소의 속성에 대한 기본 값 스타일을 설정해야 합니다

Nicolas Gallagher와 Jonathan Neal이 개발한 Normalize.css를 권장하며, 자신의 프로젝트에 따라 적절하게 삭제할 수 있습니다.

기본 스타일

유형 선택기와 결합기(예: ul ul은 ul 아래의 ul을 의미함) 또는 의사 클래스를 사용하여 HTML 요소에 더 자세한 스타일을 추가합니다. 예: 색상, 글꼴 모음, 글꼴 크기, 문자 간격, 줄 높이, 여백, 패딩 등

HTML 요소는 블록 요소, 제목 및 텍스트 요소, 앵커 요소, 텍스트 의미 요소, 목록, 표, 양식 등으로 나눌 수 있습니다. 요소마다 기본 스타일 설정이 조금씩 다릅니다. 요소 기본 스타일 시트를 참조하세요.

컴포넌트 스타일

컴포넌트에서 중요한 것은 버튼, 드롭다운 메뉴, 모달 상자, 탭 등과 같은 재사용성입니다.

구현해야 할 동작, 즉 구성 요소가 달성하는 효과를 정의하고 HTML 구조를 구성합니다.
재사용성을 보장하기 위해 구성 요소의 요소에 스타일을 추가합니다.
스타일을 다시 작성합니다. 필요에 따라 요소 컨테이너. 확인 버튼, 경고 버튼, 성공 버튼 등 컴포넌트의 컨테이너 요소에 대해 서로 다른 클래스 이름을 정의합니다.
크기는 컴포넌트의 상위 요소에 설정됩니다.

기능적 스타일

사용 !class 속성을 정의하는 데 합리적으로 중요하며 JavaScript에서 스타일을 조작할 때 사용됩니다. 예를 들어 요소 숨기기를 구현하려면 다음 클래스를 추가하세요.

.hidden {
  display: none !important;
}

로그인 후 복사

브라우저별 스타일

브라우저 동작은 앞으로 통합되는 경향이 있지만 일부 오래된 브라우저에는 여전히 이상한 동작이 있습니다. 이러한 문제를 해결하기 위해 몇 가지 스타일 해킹을 사용해야 했으며, 이러한 스타일을 별도의 스타일시트에 넣고 조건부 주석을 사용하여 참조를 추가하는 것이 좋습니다.

<!--[if IE 8]>
  <link rel="stylesheet" href="ie8.css" />
<![endif]-->

로그인 후 복사

코드 유지

코드 사양

代码规范是将良好的代码编写方法记录下来形成指南，以鼓励团队所有成员以相同的方法编写代码。规范应定期审阅和更新。CSS 代码规范通常指定了注释、格式、命名、选择器用法等方便的规范。

模式库

模式库是网站使用的一组用户界面模式，将所有组件汇集在一起。好处就是参与项目的成员都能了解到搭建网站的各个模块，熟悉背后的原理，并且有助于保证用户界面的一致性。

推荐几个优秀的模式库：

Mailchimp's Pattern Library
[Carbon Design System](http://carbondesignsystem.com/style/color/swatches)
Code For America

代码的组织和重构策略

按照样式从最不精确到最精确组织 CSS

之前我们为样式分类，现在我们按照产生作用的顺序再来组织一下 CSS 代码：

通用样式：设定基准，消除不同浏览器之间的不一致性
基础样式：为网站所有元素提供基本的样式，如颜色、间距、行高、字体等，不需要重写
组件及容器样式：以上一步的基础样式为基础，用类定义样式
结构化样式：该样式常用来创建布局，定义尺寸等
功能样式：最精确的样式，满足单一目的而实现的样式，如警告框样式
浏览器特定样式

PS：媒体查询要靠近相关声明块，这样做可以为样式是如何起作用的提供更多的背景信息。

重构前审查 CSS

如下审查非常有助于重构：

所用到的属性列表
颜色数量
使用的最高和最低选择器优先级
选择器长度

CSS Dig 是 Google Chrome 的一款插件，可以帮助获取以上信息。

重构策略

推荐多次小范围重构，避免大范围重构引入错误。

（1）删除僵尸代码：

没有使用的声明块、重复的声明块和声明语句。

（2）分离 CSS 和 JavaScript

（3）分离基础样式

如果一个类型选择器使用过多次，新建一条规则集，找到最常用的属性，添加到新的规则集。从其他规则集删除重复的属性，因为它们可以继承新定义的基础样式。

/* 重构前 */
body > p > h1 {
  color: #000;
  font-size: 32px;
  margin-bottom: 12px;
}

.section-condensed h1 {
  color: #000;
  font-size: 16px;
}

.order-form h1 {
  color: #333;
  text-decoration: underline;
}

/* 重构后 */
h1 {
  color: #000;
  font-family: Helvetica, san-serif;
  font-size: 32px;
  line-height: 1.2;
}

body > p > h1 {
  margin-bottom: 12px;
}

.section-condensed h1 {
  font-size: 16px;
}

.order-form h1 {
  color: #333;
  text-decoration: underline;
}

로그인 후 복사

（4）删除冗余的 ID

/* 不推荐 */
#main-header ul#main-menu {}
/* 推荐 */
#main-menu {}

로그인 후 복사

（5）定义可复用的组件，删除重复的 CSS

（6）删除行内 CSS