之前不久，由于自己平时涉猎还算广泛，总结了一篇博客：这些JavaScript编程黑科技，装逼指南，高逼格代码，让你惊叹不已，没想到受到了大家的欢迎，有人希望能博主还能整理个 CSS 的一些黑魔法小技巧，无奈我 CSS 一直很渣，没什么干货，最近写了一个 Chrome 插件 GayHub，算是把 GitHub 的样式审查了个变，在写的过程中，也收获了很多关于 CSS 的小技巧，尤其是开始的第一个技巧，学习到了很多，于是再加上一波搜集，就诞生这篇博文，欢迎补充~~~😂。

1、利用 CSS 的 content 属性 attr 抓取资料

需求

鼠标悬浮实现一个提示的文字，类似github的这种，

最近做的一个项目涉及到评分和展示分数的模块，UI设计师也给了几个切好的图片，实现五角星评分方式很多，本质爱折腾的精神和对性能追求以及便于维护的考虑，搜集和尝试了很多方式，最终采用了纯css驱动的实现方式完成评分和展示分数的功能，没有js,也就意味着没判断逻辑，代码出错的几率更少，也更便于维护，在此，把这个功能的实现的过程记录和分享一下，一起学习交流。

原文收录在我的 GitHub博客 (https://github.com/jawil/blog) ，喜欢的可以关注最新动态，大家一起多交流学习，共同进步。

五角星的实现

1.图片或者字体图标

不极致追求性能的话,直接利用设计师给的png或者jpg

最近看了很多这方面的文章，能搜到的基本看了个遍，但感觉还是似懂非懂，知道这个东西，很难说出这是个什么东西，先整理一些概念，慢慢消化，以后慢慢探索其中的原因。

1、PX(CSS pixels)

1.1 定义

虚拟像素，可以理解为“直觉”像素，CSS和JS使用的抽象单位，浏览器内的一切长度都是以CSS像素为单位的，CSS像素的单位是px。

1.2 注意

在CSS规范中，长度单位可以分为两类，绝对(absolute)单位以及相对(relative)单位。px是一个相对单位，相对的是设备像素(device pixel)。

在同样一个设备上，每1个CSS像素所代表的物理像素是可以变化的(即CSS像素

CSS 类名的单词连字符：下划线还是横杠？

本文的部分内容整理自我对此问题的解答： 命名 CSS 的类或 ID 时单词间如何连接？ - 知乎

问题

CSS 类或 ID 命名时单词间连接通常有这几种写法：

• 驼峰式： solutionTitle、solutionDetail
• 用横杠连接： solution-title、solution-detail
• 下划线连接： solution_title、solution_detail

应该采用哪种写法呢？选择的时候是出于个人习惯还是有别的考虑？

看了下豆瓣，美团，淘宝的源码，都是采用 solution_title 的写法。

我的回答

首先定个性，

浅谈 CSS 预处理器（一）：为什么要使用预处理器？

前言

你好，我是魔法哥。我是一名传统的前端开发者，我的很大一部分工作就是为各种类型的网页写 CSS，写了很多年。

我从三年前开始接触并使用 CSS 预处理，如鱼得水，相见恨晚。因此，我感觉有必要写些文章来总结一下这方面的心得。如果你是一位还没有接触预处理器的 CSS 开发者，希望我的文章能够帮助你轻松开始！

（注：本文的示例代码均采用 Stylus 作为 CSS 预处理语言。）

背景

CSS 自诞生以来，基本语法和核心机制一直没有本质上的变化，它的发展几乎全是表现力层面上的提升。最开始 CSS 在网页中的作用只是辅助性的装饰，轻便易学是