作为Web开发人员应避免的10种CSS做法!

更新日期: 2021-05-05阅读: 1.7k标签: css

有人认为css很难学习,没有什么逻辑可言,而且还坑很多,可能是大家对CSS还不是很了解,因为我提出了五个我不喜欢的开发者习惯,并向大家展示如何避免它们。


1. 设置边距或填充,然后将其重置

我经常看到有人为所有元素设置边距或填充,然后又将第一个或最后一个元素的值重置。

.item {
  margin-right: 1.6rem;
}

.item:last-child {
  margin-right: 0;
}

对于更简单,更简洁的CSS,请使用以下选项之一:nth-child / nth-of-type选择器,:not()伪类或相邻的兄弟组合器,而后者又被称为+。

.item:not(:last-child) {
  margin-right: 1.6rem;
}
.item:nth-child(n+2) {
  margin-left: 1.6rem;
}
.item + .item {
  margin-left: 1.6rem;
}

2. 为position:absolute/fixed的元素添加display:block

.button::before {
  content: "";
  position: absolute;
  display: block;
}
.button::before {
  content: "";
  position: fixed;
  display: block;
}

你知道吗?当你为一个element设置position: absolute 或 position: fixed的时候,默认就有display: block这个属性!

因此,在这种情况下,如果你设置display:inline-*的时候,将会做如下的转换inline或inline-block将转换成block,inline-flex转换成flex,inlone-grid转换成grid,inline-table转换成table

我们可以改成这样:

.button::before {
  content: "";
  position: absolute;
}
.button::before {
  content: "";
  position: flxed;
}

3. 使用transform: translate (-50%, -50%)居中

让一个element水平垂直居中,其中的一种解决方案是结合使用position: absolute和使用transform属性。但是,这个技术在基于Chromium的浏览器中引起了模糊的文本问题。

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

在引入flexbox之后,我认为该技术已不再适用。 问题是它不能解决文本模糊的问题。

而且,它使用了五个属性。 因此,我想分享一个技巧,可以将代码减少为两个属性。

我们可以使用margin:auto在flex容器内自动放置,浏览器将元素居中。 只有两个属性,仅此而已。

.parent {
  display: flex;
}

.child {
  margin: auto;
}

4. 在块级元素上设置 width: 100%

我们经常使用flexbox创建一个多列网格,该网格逐渐转换为单列。

为了将网格转换为一列,开发人员使用宽度:100%。我不明白他们为什么这么做。网格元素是块元素,默认情况下可以执行此操作,而无需使用其他属性。

<div class="parent">
  <div class="child">Item 1</div>
  <div class="child">Item 2</div>
  <div class="child">Item 3</div>
  <div class="child">Item 4</div>
</div>
.parent {
  display: flex;
  flex-wrap: wrap;
}

.child {
  width: 100%;
}

@media (min-width: 1024px) {
  .child {
    width: 25%;
  }
}

因此,我们不需要使用width:100%,而是应该编写媒体查询,以便flexbox仅用于创建多列网格。

@media (min-width: 1024px) {
  .parent {
    display: flex;
    flex-wrap: wrap;
  }

  .child {
    width: 25%;
  }
}

5. 为Flex布局下的子元素,设置display: block

.parent {
  display: flex;
}

.child {
  display: block;
}

使用flexbox时,请务必记住,创建Flex容器(添加显示:flex)时,所有子项(flex项)都会被阻塞。

这意味着子元素被设置为display:block,并且只能具有block。因此,如果你设置了inline或inline-block,它将更改为block,inline-flex=> flex,inline-grid=> grid和inline-table=> table。

因此,不需要为flex的子项元素添加display:block,浏览器默认就会添加。


6. 不需要使用px⁣的时候使用了

.parent {
   padding: 0px;
}

您是否知道,要将一个值设置为0时,不需要加上px:

.parent {
   padding: 0;
}

7. 重复相同的代码⁣

.parent {
   padding: 10px;
   margin: 20px;
}

.child {
   padding: 10px;
   margin: 20px
}

始终牢记DRY规则。 不要重复自己。 代码的数量将使你在应用程序的性能和加载时间方面付出代价。

.parent .child {
   padding: 10px;
   margin: 20px;
}

8. 使用颜色名称

.parent {
  color: red
}

使用颜色代码更好:

.parent {
  color: #fb0100;
}

9. 不用属性简写的方式

.parent {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-right: 10px;
  margin-left: 10px;
}

当您可以用一行执行相同的操作时,请避免使用多行代码:

.parent {
  margin: 10px;
}

10. 没有备用字体font fallback⁣

.parent {
  font-family: Georgia;
}

那么在什么情况下浏览器将没有您想要的字体?这很普遍。只有少数几种字体被认为是“网络安全”的-这意味着大多数访问您网站的计算机都已安装了该字体,因此浏览器可以使用该字体。

.parent {
  font-family: Georgia, Arial, sans-serif;
}

作者:GitHubGanKai_
链接:https://juejin.cn/post/6960138349789216804
来源:掘金

链接: https://www.fly63.com/article/detial/10284

css自动省略号...,通过css实现单行、多行文本溢出显示省略号

网页开发过程中经常会遇到需要把多行文字溢出显示省略号,这篇文章将总结通过多种方法实现文本末尾省略号显示。

深入理解letter-spacing,word-spacing的对比区别

word-spacing 属性增加或减少单词间的空白(即字间隔)。 letter-spacing 属性增加或减少字符间的空白(字符间距)。

整理一下CSS最容易躺枪的二十规则,大家能躺中几条?

满屏div之css最容易中枪的二十条规则,你中枪了吗?一、float:left/right 或者 position: absolute 后还写上 display:block?二、认为布局就是 Float,所有的地方都是 Float,全家都是 Float!

如何编写轻量级 CSS 框架

我想每个人都应该归纳总结工作中的常见需求,编写一套适合自己的 CSS 框架。大多数的轻量级框架只是 CSS 框架,不涉及 JS 部分,主要用于网页的布局。

精简CSS代码,提高代码的可读性和加载速度

定义简洁的CSS规则:CSS的每条规则中都包含了规则的属性及属性值。定义简洁的CSS规则主要是指合并相关规则和定义简洁的属性值。

css完美解决网页在iphoneX的头部刘海显示问题

css完美解决iphonX白条,网站扩展到整个屏幕,CSS Shapes中有个CSS属性名为shape-outside实现元素滚动自动环绕iPhone X刘海

css中 出现height为100%失效的原因及解决方案

我们都知道需要给html和body标签设置了高度height:100%之后,再给内部的div设置height:100%的时候,内部div的高度100%才会起到作用。这是由于:%是一个相对父元素计算得来的高度,要想使他有效,我们需要设置父元素的height。

CSS3 clip-path 用法介绍

clip-path属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示,区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径,或者作为一个形状例如circle().。clip-path属性代替了现在已经弃用的剪切 clip属性。

CSS中可以和不可以继承的属性

这篇文章整理css中无继承性的属性、继承性的属性、所有元素可以继承的属性、内联元素可以继承的属性、块级元素可以继承的属性

你知道我们平时在CSS中写的%都是相对于谁吗?

编写CSS的时候,经常会用到百分比赋值(%)实现自适应。像我们最常使用的流式布局设计模式,基本所有的column的宽度都是通过%来取值的。或者比如经常会遇到的元素水平垂直居中问题

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!