찾다

집 >웹 프론트엔드 >CSS 튜토리얼 >CSS 코드 리팩토링에 대한 자세한 설명

CSS 코드 리팩토링에 대한 자세한 설명

小云云
小云云원래의
2018-01-31 11:14:521632검색

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

1. 리팩토링 및 아키텍처

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

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

뛰어난 아키텍처:

  1. 예측 가능: 소프트웨어의 작동 방식과 구조에 대해 정확한 가정을 할 수 있습니다.

  2. 재사용 가능: 다시 작성하지 않고도 동일한 코드를 여러 위치에서 사용

  3. 확장 가능: It 새로운 콘텐츠를 추가하기가 더 쉽습니다

  4. 유지 관리 가능: 다른 코드를 크게 변경하지 않고 하나의 코드를 수정합니다

2 CSS 선택기의 우선순위

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

  1. 에 인라인 스타일 속성이 있는 경우, a=1이고, 그렇지 않은 경우 a=0

  2. b는 ID 선택기입니다.

    의 수

  3. c는 클래스 선택자, 속성 선택자, 의사 클래스의 개수입니다.

  4. d는 유형 선택자와 의사 요소의 개수입니다.

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

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

3. 고품질 CSS 작성 방법

댓글 사용

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

  1. 파일 콘텐츠

  2. 선택기 종속성 및 사용법

  3. 특정 선언을 사용하는 이유 (해킹 등)

  4. 더 이상 사용하면 안 되는 더 이상 사용되지 않는 스타일

/*
* 导航链接样式
*
* @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 요소는 블록 요소, 제목 및 텍스트 요소, 앵커 요소, 텍스트 의미 요소, 목록, 표, 양식 등으로 나눌 수 있습니다. 요소마다 기본 스타일 설정이 조금씩 다릅니다. 요소 기본 스타일 시트를 참조하세요.

컴포넌트 스타일

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

  1. 구현해야 할 동작, 즉 구성 요소가 달성하는 효과를 정의하고 HTML 구조를 구성합니다.

  2. 재사용성을 보장하기 위해 구성 요소의 요소에 스타일을 추가합니다.

  3. 스타일을 다시 작성합니다. 필요에 따라 요소 컨테이너. 확인 버튼, 경고 버튼, 성공 버튼 등 컴포넌트의 컨테이너 요소에 대해 서로 다른 클래스 이름을 정의합니다.

  4. 크기는 컴포넌트의 상위 요소에 설정됩니다.

기능적 스타일

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

.hidden {
  display: none !important;
}

브라우저별 스타일

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

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

코드 유지

코드 사양

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

模式库

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

推荐几个优秀的模式库：

  1. Mailchimp's Pattern Library

  2. [Carbon Design System](http://carbondesignsystem.com/style/color/swatches)

  3. Code For America

代码的组织和重构策略

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

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

  1. 通用样式：设定基准，消除不同浏览器之间的不一致性

  2. 基础样式：为网站所有元素提供基本的样式，如颜色、间距、行高、字体等，不需要重写

  3. 组件及容器样式：以上一步的基础样式为基础，用类定义样式

  4. 结构化样式：该样式常用来创建布局，定义尺寸等

  5. 功能样式：最精确的样式，满足单一目的而实现的样式，如警告框样式

  6. 浏览器特定样式

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

重构前审查 CSS

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

  1. 所用到的属性列表

  2. 颜色数量

  3. 使用的最高和最低选择器优先级

  4. 选择器长度

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

相关推荐：

谈一谈PHP的代码重构_PHP教程

推荐五款优秀的PHP代码重构工具

推荐五款优秀的PHP代码重构工具_PHP


위 내용은 CSS 코드 리팩토링에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

php JavaScript carbon 架构 css chrome css3 html for 继承 JS 选择器 样式表 margin padding border 伪类 伪元素 ul http 重构 代码规范
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：CSS로 육각형 그림을 만드는 방법다음 기사：CSS로 육각형 그림을 만드는 방법

관련 기사

더보기