CSS代码技巧

最新推荐文章于 2024-02-23 21:43:47 发布

xvzhengyang

最新推荐文章于 2024-02-23 21:43:47 发布

阅读量160

点赞数

分类专栏： css html 前端 HTML与CSS

前端同时被 3 个专栏收录

80 篇文章 0 订阅

订阅专栏

css

47 篇文章 0 订阅

订阅专栏

html

28 篇文章 0 订阅

订阅专栏

1.当class或者ID包含多个单词时，应使用连字符（-），CSS不区分大小写，因此不能使用驼峰式命名。同样，CSS中也不建议使用下划线连接的命名方式。

/*  正确     */.footer-column-left { }
/*  错误  */.footerColumnLeft { }
.footer_column_left { }

2.不要重复设置

大多数CSS属性的值都是从DOM树中向上一级的元素继承的，因此才被命名为级联样式表。以font属性为例-它总是从父级继承的，您不必为页面上的每个元素都单独设置。

只需将要设置的字体样式添加到<html>或<body>元素中，然后让它们自动向下继承。

html {    font: normal 16px/1.4 sans-serif;}

然后我们就可以统一的一次改变页面上所有的文字样式了。当然，CSS中并不是所有的属性都是可继承的，对于这些属性我们仍然需要在每个元素上单独设置。

3.使用transform属性来创建动画

最好使用transform()函数来创建元素的位移或大小动画，尽量不要直接改变元素的width，height以及left/top/bottom/right属性值。

下面的例子中，我们给.ball元素添加了一个从左向右的移动动画。推荐使用transform: translateX()函数来代替left属性

.ball {    left: 50px;    transition: 0.4s ease-out;}
/* 不建议 */.ball.slide-out {    left: 500px;}
/* 建议 */.ball.slide-out {    transform: translateX(450px);}

transform以及它的所有函数（translate, rotate, scale等）几乎没有浏览器兼容性问题，可以随意使用。

4.使用text-transform转换字母为大写

本条适用于英文环境，不适合中文

在HTML中，可以将某个单词全部写为大写字母来表达强调的含义。比如：

<h3>Employees MUST wear a helmet!</h3>

如果你需要将某段文字全部转化为大写，我们可以在HTML中正常书写，然后通过CSS来转化。这样可以保持上下文内容的一致性。

<div class="movie-poster">Star Wars: The Force Awakens</div>.movie-poster {    text-transform: uppercase;}

5.Em, Rem与px

设置元素与文本的大小应该用哪种单位，em，rem，还是px？一直以来都有很多的争论。事实是，这三种选择都是可行的，都有其利弊。

在什么时候在什么项目使用哪种单位是没有一个定论的，开发人员的习惯不同，项目的要求不同，都可能会使用不同的单位。然而，虽然没有固定的规则，但是每种单位还是有一些要注意的地方的：

em - 设置元素为1em，其大小与父元素的font-size属性有关。这个单位用于媒体查询中，特别适用于响应式开发，但是由于em单位在每一级中都是相对于父元素进行计算的，所以要得出某个子元素em单位对应的px值，有时候是很麻烦的。

rem - 相对于<html>元素的font-size大小计算，rem使得统一改变页面上的所有标题和段落文本大小变得非常容易。

px - 像素单位是最精确的，但是不适用于自适应的设计。px单位是可靠的，并且易于理解，我们可以精细的控制元素的大小和移动到1px。

6.对于大型项目使用预处理器

你一定听说过它们 - Sass, Less, PostCSS, Stylus。预处理器是CSS的未来。它们提供诸如变量、CSS函数、选择器嵌套和许多其他很酷的功能，使CSS代码更易于管理，特别是在大型项目中。

举个简单的例子，下面是一个SASS代码的片段，它使用到了一些CSS变量和函数：

$accent-color: #2196F3;a {    padding: 10px 15px;    background-color: $accent-color;}a:hover {    background-color: darken($accent-color,10%);}预处理器的唯一的不足之处是它们仍然需要编译成普通的CSS。而CSS推出的自定义属性则是真正意义上的预处理。

7.使用AutoPrefixer达到更好的兼容性

浏览器前缀是CSS中最烦人的事情之一，每个属性需要的前缀是不一致的，你永远不知道到底需要哪一个，如果真的要把它一个一个手动添加到样式表中，那无疑是一个无聊的噩梦。

值得庆幸的是，有工具可以自动为我们提供添加浏览器前缀的功能，甚至可以决定需要支持哪些浏览器：

在线工具：Autoprefixer
文本编辑器插件：Sublime Text, Atom
代码库：Autoprefixer (PostCSS)

8.压缩CSS文件

为了提高网站和应用程序的加载速度和页面负载，您应该使用压缩后的资源。压缩版本的文件将删除所有空白和重复，从而减少总文件的体积。当然，这个过程也会使样式表完全不可读，所以要在生产环境中使用.min版本，同时为开发保留常规版本。

有许多不同的方法来压缩CSS代码：

在线工具：CSS Minifier, CSS Compressor
文本编辑器插件： Sublime Text, Atom
代码库： Minfiy (PHP), CSSO, CSSNano (PostCSS, Grunt, Gulp)

9.Caniuse

对于CSS的属性Web浏览器仍然存在许多兼容性不一致的地方。使用caniuse来检查您使用的属性是否得到了广泛的支持？是否需要前缀？或者是否在某个浏览器中使用有要注意的地方？有了caniuse你在写CSS时就会更得心应手了。

10.

验证

验证CSS可能不像验证HTML或JavaScript代码那么重要，但是通过工具运行一下你的代码仍然非常有用。它会告诉你是否犯了任何错误，警告错误的用法，并为您提供改进代码的提示。

就像压缩和Autoprefixer一样，有免费的工具可以利用：

在线工具：W3 Validator, CSS Lint
文本编辑器插件：Sublime Text, Atom
代码库：stylelint (Node.js, PostCSS), css-validator (Node.js)

xvzhengyang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS代码技巧

1.当class或者ID包含多个单词时，应使用连字符（-），CSS不区分大小写，因此不能使用驼峰式命名。同样，CSS中也不建议使用下划线连接的命名方式。/* 正确 */.footer-column-left { }/* 错误 */.footerColumnLeft { }.footer_column_left { }2.不要重复设置大多数CSS属性的值都是从D...
复制链接

扫一扫