用好这20个css技巧快速提升你的CSS技能

击右上方红色按钮关注“web秀”，让你真正秀起来

前言

随着前端开发越来越关注效率：通过选择器的使用和简化代码来快速加载渲染。像Less、SCSS这样的预处理器在工作的时候，需要绕的路较长，而直接使用css速度会更快。这里涵盖了20个css技巧来帮助你减少重复规则和复写，在布局中标准化样式流程，不仅可以帮助你高效地创建自己的框架，而且可以解决许多常见的问题。

如何提升你的CSS技能？掌握这20个css技巧即可[完整版]

如果您对CSS比较陌生，看看这篇文章CSS选择器如此之多，你了解多少？

1、使用CSS重置（reset）

css重置库如normalize.css已经被使用很多年了，它们可以为你的网站样式提供一个比较清晰的标准，来确保跨浏览器之间的一致性。大多数项目并不需要这些库包含的所有规则，可以通过一条简单的规则来应用于布局中的所有元素，删除所有的margin、padding改变浏览器默认的盒模型。

*{ 
 box-sizing:border-box; 
 margin:0; 
 padding:0 
}

使用box-sizing声明是可选择，如果你使用下面继承的盒模型形式可以跳过它

2、继承盒模型

让盒模型从html 继承：

html { 
 box-sizing: border-box; 
} 
*, *:before, *:after { 
 box-sizing: inherit; 
}

3、使用flexbox布局来避免margin的问题（Get Rid of Margin hacks width Flexbox）

当你多少次试着去设计栅格布局如：组合或者图片画廊，如果使用浮动的方式，那么就需要去清除浮动和重置外边距来使其分解成所需要行数。为了避免nth-、first-、last-child 问题，可以使用flexbox 的space-between 属性值

.flex-container{ 
 display:flex; 
 justify-content:space-between; 
} 
.flex-container .item{ 
 flex-basis:23%; 
}

4、使用:not() 解决lists边框的问题

在web设计中，我们通常使用：last-child nth-child 选择器来覆盖原先声明应在父选择器上的样式。比如说一个导航菜单，通过使用borders 来给每个链接Link创建分割符，然后再在加上一条规则解除最后一个link的border

.nav li { 
 border-right: 1px solid #666; 
} 
.nav li:last-child { 
 border-right: none; 
}

这是一种很混乱的方式，它不仅强制浏览器以一种方式渲染，然后又通过特定的选择器来撤销它。这样覆盖样式是不可避免的。然而，最重要的是，我们可以通过使用：not伪类(pseudo-class) 在你想声明的元素上仅仅只使用一种样式：

.nav li:not(:last-child) { 
 border-right: 1px solid #666; 
}

上面就是，除了最后一个li以外，所有的 .nav li 都加上了border样式，是不是很简单！当然，你也可以使用 .nav li+li或者 .nav li:first-child ~li ,但是：not是更有语义化（semantic）和容易理解的。

如何提升你的CSS技能？掌握这20个css技巧即可[完整版]

5、body上加入line-height样式

导致低样式效率（inefficient stylesheets）的一件事就是不断的重复声明。最好是做下项目规划和组合规则，这样CSS会更流畅。实现这一点，就需要我们理解级联（cascade）,以及如何在通用选择器写的样式可以继承在其他地方。行间距（line-height）可以作为给你的整个项目设置的一个属性，不仅可以减小代码量，而且可以让你的网站的样式给一个标准的外观

body { 
 line-height: 1.5; 
}

请注意，这里的声明没有单位，我们只是告诉浏览器让它渲染行高是渲染字体大小的1.5倍

6、垂直居中任何元素 (vertical-center anything)

在没有准备使用CSSGrid 布局的时候，设置垂直居中布局的全局规则是一个很好的方式，可以为优雅（elegantly）的设置内容布局奠定一个基础

html, body { 
 height: 100%; 
 margin: 0; 
} 
body { 
 -webkit-align-items: center; 
 -ms-flex-align: center; 
 align-items: center; 
 display: -webkit-flex; 
 display: flex; 
}

这15种CSS居中的方式，你都用过哪几种？

7、使用SVG icons

SVG使用于所有分辨类，并且所有浏览器也都支持。所以可以将.png .jpg .gif 等文件丢弃。FontAwsome5中也提供了SVG的图标字体。设置SVG的格式就跟其他图片类型一样：

.logo { 
 background: url("logo.svg"); 
}

温馨提示：如果将SVG用在可交互的元素上比如说button，SVG 会产生无法加载的问题。可以通过下面这个规则来确保SVG可以访问到（确保在HTML中已设置适当的aria属性）

.no-svg .icon-only:after { 
 content: attr(aria-label); 
}

如何提升你的CSS技能？掌握这20个css技巧即可[完整版]

8、使用 “OWL选择器”

使用通用选择器（universal selector）* 和相邻的兄弟选择器（adjacent sibling selector）+ 可以提供一个强大的的CSS功能，给紧跟其他元素中的文档流中的所有元素设置统一的规则

* + * { 
 margin-top: 1.5rem; 
}

这是一个很棒的技巧，可以帮你创建更加均匀的类型跟间距。在上面的列子中，跟在其他元素后面的元素，比如说H3后面的H4，或者一个段落之后的一个段落，他们之间至少1.5rems的间距（大约为30px）

9、一致的垂直结构（Consistent Vertical Rhythm）

一致的垂直节奏提供了一种视觉美学，使内容更具可读性。如果owl选择器过于通用，请在元素内使用通用选择器（*）为布局的特定部分创建一致的垂直节奏：

.intro > * { 
 margin-bottom: 1.25rem; 
}

10、对更漂亮的换行文本使用 box-decoration-break

假设您希望对换行到多行的长文本行应用统一的间距、边距、突出显示或背景色，但不希望整个段落或标题看起来像一个大块。Box Decoration Break属性允许您仅对文本应用样式，同时保持填充和页边距的完整性。如果要在悬停时应用突出显示，或在滑块中设置子文本样式以具有突出显示的外观，则此功能尤其有用：

.p { 
 display: inline-block; 
 box-decoration-break: clone; 
 -o-box-decoration-break: clone; 
 -webkit-box-decoration-break: clone; 
}

内联块声明允许将颜色、背景、页边距和填充应用于每行文本，而不是整个元素，克隆声明确保将这些样式均匀地应用于每行。

11、等宽表格单元格

表格可能很难处理，所以尝试使用table-layout：fixed来保持单元格相等宽度：

.calendar { 
 table-layout: fixed; 
}

如何提升你的CSS技能？掌握这20个css技巧即可[完整版]

12、强制使用属性选择器显示空链接

这对于通过CMS插入的链接特别有用，CMS通常不具有类属性，并帮助您在不影响级联的情况下对其进行特定样式设置。例如，<a>元素没有文本值，但href属性有一个链接：

a[href^="http"]:empty::before { 
 content: attr(href); 
}

13、样式“默认”链接

说到链接样式，您可以在几乎每个样式表中找到一个通用的A样式。这迫使您为子元素中的任何链接编写额外的覆盖和样式规则，并且在使用像WordPress这样的CMS时，可能会导致您的主链接样式比按钮文本颜色更容易出现问题。尝试这种较少干扰的方式为“默认”链接添加样式：

a[href]:not([class]) { 
 color: #999; 
 text-decoration: none; 
 transition: all ease-in-out .3s;
}

14、比率框

要创建具有固有比率的框，您需要做的就是将顶部或底部填充应用于div：

.container { 
 height: 0; 
 padding-bottom: 20%; 
 position: relative; 
} 
.container div { 
 border: 2px dashed #ddd; 
 height: 100%; 
 left: 0; 
 position: absolute; 
 top: 0; 
 width: 100%; 
}

使用20％进行填充使得框的高度等于其宽度的20％。无论视口的宽度如何，子div都将保持其纵横比（100％/ 20％=5：1）。

如何提升你的CSS技能？掌握这20个css技巧即可[完整版]

15、风格破碎的图像

这个技巧不是关于代码缩减，而是关于细化设计细节的。破碎的图像发生的原因有很多，要么不雅观，要么导致混乱（只是一个空元素）。用这个小小的CSS创建更美观的效果：

img { 
 display: block; 
 font-family: Helvetica, Arial, sans-serif; 
 font-weight: 300; 
 height: auto; 
 line-height: 2; 
 position: relative; 
 text-align: center; 
 width: 100%; 
} 
img:before { 
 content: "We're sorry, the image below is missing :("; 
 display: block; 
 margin-bottom: 10px; 
} 
img:after { 
 content: "(url: " attr(src) ")"; 
 display: block; 
 font-size: 12px; 
}

16、使用rem进行全局大小调整；使用em进行局部大小调整

在设置根目录的基本字体大小后，例如html字体大小：15px；，可以将包含元素的字体大小设置为rem:

article { 
 font-size: 1.25rem; 
} 
aside { 
 font-size: .9rem; 
}

然后将文本元素的字体大小设置为em

h2 { 
 font-size: 2em; 
} 
p { 
 font-size: 1em; 
}

现在，每个包含的元素都变得分区化，更易于样式化、更易于维护和灵活。

web开发中该用 em 还是 rem 呢？

如何提升你的CSS技能？掌握这20个css技巧即可[完整版]

17、隐藏未静音的自动播放视频

当您处理无法从源代码轻松控制的内容时,这对于自定义用户样式表来说是一个很好的技巧。这个技巧将帮助您避免在加载页面时自动播放视频中的声音干扰访问者，并再次提供了精彩的：not（）伪选择器：

video[autoplay]:not([muted]) { 
 display: none; 
}

18、灵活运用root类型

响应布局中的字体大小应该能够自动调整到视区，从而保存编写媒体查询的工作，以处理字体大小。可以使用:not和视区单位，根据视区高度和宽度计算字体大小：

:root { 
 font-size: calc(1vw + 1vh + .5vmin); 
}

现在，您可以使用根em单位，该单位基于:not：

body { 
 font: 1rem/1.6 sans-serif; 
}

结合上面的rem/em技巧以获得更好的控制。有关管理Safari旧版本的提示，请参阅CSS Fix for iOS VH Unit Bug。

19、在表单元素上设置字体大小，以获得更好的移动体验

为了避免移动浏览器（iOS Safari等）在点击<select>下拉列表时放大HTML表单元素，请在添加font-size样式：

input[type="text"], 
input[type="number"], 
select, 
textarea { 
 font-size: 16px; 
}

20、CSS变量

最后，最强大的CSS级别来自于CSS变量，它允许您声明一组公共属性值，这些值可以通过样式表中任何位置的关键字重用。你可能有一套颜色在整个项目中使用，以保持一致性。在CSS中反复重复这些颜色值不仅是件烦人的事情，而且还容易出错。如果某个颜色在某个时刻需要改变，你就不得不去寻找和替换，这是不可靠或不快速的，当为最终用户构建产品时，变量使得定制变得容易得多。例如：

如何提升你的CSS技能？掌握这20个css技巧即可[完整版]

:root { 
 --main-color: #06c; 
 --accent-color: #999; 
} 
 
h1, h2, h3 { 
 color: var(--main-color); 
} 
a[href]:not([class]), 
p, 
footer span{ 
 color: var(--accent-color); 
}

公告

喜欢小编的点击关注，了解更多知识！

文共3019字，预计学习时长9分钟

来源：Pexels

JavaScript是目前最流行的编程语言之一。就像任何其他编程语言一样，它有许多让人马上就能学会的小技巧。

每一个技巧都能完成大多数开发人员每天需要完成的工作。根据经验，读者可能已经知道了其中一些，然而仍会对其他的技巧大吃一惊。

本文将介绍一系列技巧，而这些技巧能将读者打造为一名更好的开发人员，并增强JavaScript技能。

我们一起来看看吧~

1.对象解构

开发人员一旦了解了对象解构，就可能每天都会用到。

但什么是解构呢？

解构是一个JavaScript表达式，允许将数组、对象、映射和集合中的数据提取到其自己的变量中。它允许您一次从一个或多个对象中提取属性。

一起看看以下示例，其中有一个用户对象。如果要将用户名(name)存储在变量中，则必须将其赋给新行上的变量。如果想把性别(gender)也存储在一个变量中，就必须重复上述操作。

const user={
    name: 'Frank',
    age: 23,
    gender: 'M',
    member: false
}const name=user.name
const gender=user.gender

使用解构，就可以通过以下语法直接获取对象属性的变量：

const { name, age, gender, member }=user;console.log(name)   // Frank
console.log(age)    // 23
console.log(gender) // M
console.log(member) // false

2.使用设备性能以更好地调试

来源：Pexels

作为一名开发人员，做的最多的事情就是调试。但是调试不仅仅是使用console.log在控制台打印出一堆日志信息这么简单。

知道控制台对象有分析代码片段性能的好办法吗？大多开发人员只知道用标准的console.log方法来调试代码。

控制台对象有很多有用的功能。它有一个time和timeEnd函数，可以帮助分析性能。其工作原理非常简单。

在被测试的代码前调用console.time函数。此函数有一个参数，接受一个描述被分析内容的字符串。在被测试代码的末尾，调用console.timeEnd函数。给这个函数与第一个参数相同的字符串。然后，运行代码所需的时间将会在控制台中显示。

console.time('loop')  for (let i=0; i < 10000; i++) {  
    // Do stuff here
}  console.timeEnd('loop')

3. Every和 some函数

Every和some函数并不是为所有开发人员熟知。然而，它们在某些情况下非常有用。先来讲讲every函数。如果想要知道数组中的所有元素是否都通过了某个测试，那就可以应用此函数。本质上，这是在遍历数组中的每个元素，并且检查它们是否属性都为真。

这听起来可能有些抽象，所以请看以下示例。并没有那么复杂。

const random_numbers=[ 13, 2, 37,18, 5 ]
const more_random_numbers=[ 0, -1, 30, 22 ]const isPositive=(number)=>{
  return number > 0
}random_numbers.every(isPositive); // returns true
more_random_numbers.every(isPositive); // returns false

Every函数返回一个布尔值。如果数组中的所有元素都通过了测试，则返回“真”(true)。如果数组中的某个元素未通过测试，则返回“假” (false)。

也可以使用一个匿名函数作为测试函数：

random_numbers.every((number)=>{
    return number > 0
})

some函数与every函数的工作原理几乎完全相同。两个函数只有一个主要区别：some函数测试的是数组中是否至少有一个元素通过了测试。

回顾上述实例，如果使用some函数而不是every函数，那么两个数组都将返回“真”(true)，因为两个数组都包含一个正数。

const random_numbers=[ 13, 2, 37,18, 5 ]
const more_random_numbers=[ 0, -1, 30, 22 ]const isPositive=(number)=>{
  return number > 0
}random_numbers.some(isPositive); // returns true
more_random_numbers.some(isPositive); // returns true

4.有条件地设置一个变量

有条件地设置一个变量很简单，而且能使代码更漂亮。在应用这个技巧的时候并不需要编写if语句——这是笔者最喜欢的JavaScript技巧之一。

所以要如何有条件地设置一个变量？

const timezone=user.preferred_timezone || 'America/New_York'

上述例子是检查用户是否有首选时区。如果用户有首选时区，则使用该时区。如果用户没有首选时区，则使用默认时区，即“美国/纽约”(‘America/New_York’)。

这段代码看起来比使用if语句要干净得多。

let timezone='America/New_York'if(user.preferred_timezone) {
    timezone=user.preferred_timezone
}

更简洁了，不是吗？

来源：Pexels

5.将值转换为字符串数组

有时需要将所有的值转换为字符串数组。例如，当使用Triple equal（===）运算符检查数组中是否存在某个数字时，可能会出现这种情况。

笔者最近遇到了一个问题，其包含multi-select控件。Select选项的HTML值是字符串而不是整数，而这是有意义的，选定值的数组如下所示：

let selected_values=[ '1', '5','8' ]

问题在于，没能成功检查所选值的数组中是否存在某个整数。笔者使用了一个Intersect函数，它使用了triple equals(===)运算符。并且由于‘5’ !==5 ，而必须找到一个解决办法。

在笔者看来，最漂亮的解决方案是将数组中的所有值都转换为整数。当笔者进行尝试时，偶然间发现了一个极其简单，却又漂亮的解决办法。

selected_values=selected_values.map(Number)// [ 1, 5, 8 ]

与将所有值转换为整数不同，可以通过简单地更改map函数的参数，将数组中的值转化为布尔值。

selected_values=selected_values.map(Boolean)

来源：Pexels

美好的未来在召唤你~干巴爹~

留言点赞关注

我们一起分享AI学习与发展的干货

如转载，请后台留言，遵守转载规范

创建 Web 应用程序时应始终考虑性能。为了帮助你开始，本文列举了有效提高应用程序性能的 12 种方法。

性能是创建网页或应用程序时最重要的一个方面。没有人想要应用程序崩溃或者网页无法加载，或者用户的等待时间很长。根据 Kissmetrics，47％的访问者希望网站在不到 2 秒的时间内加载，如果加载过程需要 3 秒以上，则有 40％的访问者会离开网站。

考虑到以上这些数字，你在创建 Web 应用程序时应始终考虑性能。为了帮助你开始，以下提供了有效提高应用程序性能的 12 种方法：

1. 在浏览器中缓存

要这样做有两种选择。第一种是使用 JavaScript Cache API，我们可以安装 service worker 来使用它。第二种是使用 HTTP 协议缓存。

访问某个对象通常要用脚本。通过把重复访问的对象存储在用户定义的变量中，以及在后续对该对象的引用中使用变量，可以立即实现性能的提升。

2. 定义执行的上下文

为了有效地衡量你在程序中加入的任何改进，你必须创建一组定义良好的环境，以便测试代码的性能。

对所有 Javascript 引擎的所有版本进行性能测试和优化实际上是不可行的。但是，在单一的环境中进行测试并非一个好习惯，因为你可能会得到片面的结果。因此，建立多个定义良好的环境并测试代码是否有效非常重要。

3. 删除未使用的 JavaScript

此步骤不仅会缩短传输时间，还会缩短浏览器分析和编译代码所需的时间。为此，你必须考虑以下几点：

如果你检测到一个用户未使用的功能，最好删除所有与之相关的 JavaScript 代码，这样网站的加载速度会更快，用户也会有更好的体验。
还有可能，你错误地加入了一个并不需要的库，或者你有依赖项，这些依赖项提供的功能在所有浏览器中原本就有，那么你无需再增加多余的代码。

4. 避免使用太多内存

你应该始终给内存加一条限制，那就是只有绝对必须的内容才能使用内存，因为你无法知道运行应用程序的设备到底需要多少内存。只要你的代码要求浏览器保留新的内存，浏览器的垃圾收集器就会被执行，并停止 JavaScript 的运行。如果经常发生这种情况，页面将变慢。

5. 推迟不必要的 JS 加载

用户希望页面快速加载，但并非所有函数都需要在页面的初始加载时就可用。如果用户必须执行某个操作才能执行某个函数（例如，通过单击某个元素或更改选项卡），那么你可以将该函数的加载推迟到初始页面加载之后。

通过这种方式，你可以避免加载和编译那些会延迟页面初始显示的 JavaScript 代码。页面完全加载后，我们可以再开始加载这些功能，以便它们在用户开始交互时立即可用。在RAIL 模型中，Google 建议将此延迟加载以 50 毫秒为单位进行，这样就不会影响用户与页面的交互。

6. 避免内存泄漏

点击“了解更多”阅读原文

在线咨询

上一篇：ASP.NET Web Forms-HTML 页面
下一篇：把HTML转成PDF的4个方案及实现方法

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

用好这20个css技巧快速提升你的CSS技能

前言

1、使用CSS重置（reset）

2、继承盒模型

3、使用flexbox布局来避免margin的问题 （Get Rid of Margin hacks width Flexbox）

4、使用:not() 解决lists边框的问题

5、body上加入line-height样式

6、垂直居中任何元素 (vertical-center anything)

7、使用SVG icons

8、使用 “OWL选择器”

9、一致的垂直结构（Consistent Vertical Rhythm）

10、对更漂亮的换行文本使用 box-decoration-break

11、等宽表格单元格

12、强制使用属性选择器显示空链接

13、样式“默认”链接

14、比率框

15、风格破碎的图像

16、使用rem进行全局大小调整；使用em进行局部大小调整

17、隐藏未静音的自动播放视频

18、灵活运用root类型

19、在表单元素上设置字体大小，以获得更好的移动体验

20、CSS变量

公告

1.对象解构

2.使用设备性能以更好地调试

3. Every和 some函数

4.有条件地设置一个变量

5.将值转换为字符串数组

1. 在浏览器中缓存

2. 定义执行的上下文

3. 删除未使用的 JavaScript

4. 避免使用太多内存

5. 推迟不必要的 JS 加载

6. 避免内存泄漏

您的项目需求

3、使用flexbox布局来避免margin的问题（Get Rid of Margin hacks width Flexbox）