Detailed explanation of CSS code refactoring

This article mainly introduces CSS code refactoring. The editor thinks it is quite good. Now I will share it with you and give you a reference. Let’s follow the editor to take a look, I hope it can help everyone.

1. Refactoring and architecture

Refactoring refers to rewriting the code to make it more concise and easier to reuse without changing the behavior of the code.

Architecture refers to the way the different components of a software project are combined.

Excellent architecture:

1. Predictable: accurate assumptions can be made about how the software will work and how it will be structured

2. Reusable: Use the same code in multiple places without rewriting

3. Extensible: It is easier to add new content

4. Maintainable: Modifying one code does not require large-scale changes to other codes

2. CSS selector priority

Use (a, b, c, d) indicates that the priority is a>>b>>c>>d, where:

1. When there is an inline style attribute, a=1 , otherwise a=0

2. b is the number of ID selectors

3. c is the number of class selectors, attribute selectors, and pseudo-classes

4. d is the type selector and the number of pseudo-elements

(ps: the difference between pseudo-classes and pseudo-elements)

!important has the highest priority and can override inline styles. Cannot be added to inline style attributes.

3. How to write high-quality CSS

Use comments

The content recorded in comments includes:

1. File content

2. Selector dependencies and usage

3. Reason for using specific declarations (hacks, etc.)

4. Deprecated styles that should no longer be used

##

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

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

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

Keep selectors simple

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

But not all scenarios should follow this recommendation. Add styles to the text and borders of the input box as follows.

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

Separate CSS and JavaScript

The classes and IDs used to select elements in JavaScript should no longer be used to add styles to elements. When modifying element styles with JavaScript, you should do so by adding and deleting classes.

It is recommended to add js- before the class and ID that are only used for JavaScript, or the ID is only used for JavaScript selection elements and the class is used for styles.

ID and class names must be meaningful

Create better boxes

The box size calculation method is content- box and border-box, it is recommended to stick to one method in a project, for example:

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

(ps: ::after notation is in CSS3 Introduced, the :: symbol is used to distinguish pseudo classes and pseudo elements. Browsers that support CSS3 also support the notation introduced in CSS2: after, IE8 only supports: after )

Classifying styles

Defining styles by purpose helps create better architecture because organizing styles into categories makes code more predictable and easier to reuse.

Universal Style

Because the default styles of different browsers are slightly different, a universal style is required to set default value styles for the attributes of various elements so that they can be used in different browsers. Browser

behaves consistently.

Recommend normalize.css developed by Nicolas Gallagher and Jonathan Neal, which can be appropriately deleted according to your own project.

Basic Style

Use type selectors and combiners (for example, ul ul means ul below ul) or pseudo-classes to add more detailed styles to HTML elements. For example: color, font-family, font-size, letter-spacing, line-height, margin, padding, etc.

HTML elements can be divided into: block elements, title and text elements, anchor elements, text semantic elements, lists, tables, forms, etc. Different elements have slightly different basic style settings. Please refer to the element basic style sheet.

Component style

The important thing about components is their reusability, such as buttons, drop-down menus, modal boxes, tabs, etc.

1. Define the behavior that needs to be implemented, that is, the effect achieved by the component, organize the HTML structure

2. Add styles to the elements in the component to ensure complexity Usability

3. Rewrite the style of the element container as needed. Such as confirmation button, warning button, success button, etc., define different class names of the container elements of the component

4. The size is set in the parent element of the component

Functional style

Use !important appropriately to define class attributes and use them when operating styles in JavaScript. For example, add the following class to implement element hiding:

.hidden {
  display: none !important;
}

Browser-specific styles

Despite future browser behavior There is a trend toward uniformity, but some older browsers still have quirky behavior. We had to use some style hacks to work around these quirks, and it is recommended to put these styles in a separate stylesheet and add references using conditional comments.

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

Maintain code

##Code specification

代码规范是将良好的代码编写方法记录下来形成指南，以鼓励团队所有成员以相同的方法编写代码。规范应定期审阅和更新。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

The above is the detailed content of Detailed explanation of CSS code refactoring. For more information, please follow other related articles on the PHP Chinese website!