强烈推荐:10 个优秀的 CSS Reset 代码
在前端开发中,CSS Reset 是非常重要的一部分,它可以让我们消除不同浏览器间默认样式的差异,为后续的开发工作提供了良好的基础。今天我们来推荐 10 个优秀的 CSS Reset 代码,帮助大家更好地进行 CSS 开发。
- Normalize.css
Normalize.css 是最受欢迎的 CSS Reset 库之一,它能够统一浏览器的默认样式,提供了跨浏览器的一致性。它保留了合理的默认值,同时修复了许多常见的浏览器问题。它具有强大的浏览器的兼容性,是很多前端开发者的首选。
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* ... */
- Eric Meyer Reset
Eric Meyer Reset 是一款非常古老的 CSS Reset 库,它是首批出现在互联网上的 CSS Reset 之一,具有良好的浏览器兼容性和广泛的用户基础。它能够使用较简单的方式消除浏览器的默认样式,为我们的开发工作提供了极大的帮助。
-- -------------------- ---- ------- ----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- -- - ------- -- -------- -- ------- -- -------- -- ---------- ----- --------------- --------- ----------- ------------ -展开代码
- Yahoo Reset
Yahoo Reset 是一款基于 Eric Meyer Reset 的样式重置库,具有良好的浏览器兼容性和稳定性。它能够重置大多数 HTML 元素的默认样式,为我们的开发工作提供了一致性的样式基础。
-- -------------------- ---- ------- ---- - ------ ----- ----------- ----- -- ----- -- - --------------------------- ---------------------- ----------------------------- ------------------ - ------- -- -------- -- - ----- - ---------------- --------- --------------- -- - ------------ - ------- -- - -------------------------- ----------------------------- - ----------- -------- ------------ -------- - ------- - ---------------- ----- - -- - ----------- ----- - ---------- - ----------- ----- - ----------------- - ---------- ----- ------------ ------- - ---------------- - -------- --- - ------------ - ----------展开代码
- Meyerweb Reset
Meyerweb Reset 是 CSS 重置的又一款经典库,专注于去除默认样式的同时,保留了许多实用的 HTML 元素样式。它的设计思想是在尽可能少的样式代码的前提下,提供高度的可定制性和清晰的样式结构。
-- -------------------- ---- ------- ----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ----- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- -- - ------- -- -------- -- ------- -- -------- -- ---------- ----- --------------- --------- ----------- ------------ - ---- - ------------ -- -展开代码
- HTML5 Reset
HTML5 Reset 是一款面向 HTML5 元素样式的重置库,它不仅去除了默认样式和差异,还对 HTML5 元素的样式进行了优化和设置。它是一款轻量级的库,适合用于不同类型的项目和网站。
-- -------------------- ---- ------- -------- ------ -------- ----------- ------- ------- ------- ------- ----- ---- ------- - -------- ------ - ---- - ----------------- ----- ------ ----- - ------ ------- ----- - -------- ------------- --------- ------- ------ -- - --------------------- - -------- ----- - -------- - -------- ----- - ---- - ---------- ----- ------------------------- ----- --------------------- ----- - ---- - ------- -- ---------- ---- ------------ ---- ----------------- ----- ------ ----- -展开代码
- Blueprint
Blueprint 是一款宽度与栅格系统相结合的 CSS Reset,它能够方便快捷地布局和排版。它的核心在于使用 HTML5 元素进行搭建和布局,同时使用 CSS 去除默认样式和差异性。它是一个强大的库,适合搭建中小型网站和项目。
-- -------------------- ---- ------- -- ---- --------- -- -- -- --- -- -- --- --- ----- -- ----- ----- ---- ----- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ----- ---- ---- --- ---- -- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- -- - ------- -- -------- -- ------- -- -------- -- ---------- ----- --------------- --------- ----------- ------------ - ---- - ------------ -- - --- -- - ----------- ----- - ----------- - - ------- ----- - ------------------ ----------------- --------- ------- - -------- --- -------- ----- - ------ - -------- -- - --- - ---------------- ----- - --- - ---------------- ------------- -展开代码
- Kube
Kube 是一款设计风格简洁、体积小巧的 CSS Reset 库,它能够消除浏览器样式的不一致性,为后续的样式编写提供了统一的基础。它具有响应式的设计思想,适合用于各种设备和浏览器。
-- -------------------- ---- ------- -- -------------------------- ------- ----- -------------------------- -- ---- - ---------- ----- ------------ ----------- ----------- ----------- - ---- - ------- -- - --- - --------------- ------- ------- -- ---------- ----- - ------ ----- - ---------- ----- - --- --- --- --- --- -- - ------- -- ------------ ------- - - - ------- - - ---- - - - ---------------- ----- ------ -------- - -- -------------------------- ------- ------ -------------------------- -- ---------- - ------- - ----- -------- - ----- ---------- ------- ----------- ----------- -展开代码
- Magnetic
Magnetic 是一款 CSS 库,具有清晰的可读性和稳定性,能够提供基础的元素风格和样式格式化。它在保留原始样式的基础之上,为元素提供了一致性的样式基础,适用于多种开发需求。
-- -------------------- ---- ------- -- -------------------------- ------- ----- -------------------------- -- ----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ----- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- -- - ------- -- -------- -- ------- -- -------- -- ---------- ----- --------------- --------- ----------- ------------ - ---- - ------------ -- - ----- - ---------------- --------- --------------- -- - --- -- - -------- -- - --- --- --- --- --- -- - ------------ ------- ---------- ----- ------------------ - --- -- - ----------- ----- - ----------- - - ------- ----- - ------------------ ----------------- --------- ------- - -------- --- -------- ----- - -- -------------------------- ------- ------ -------------------------- -- ---- - ------------ ---------- ------ ----------- ---------- ----- ------ ----- ----------- ----- - ------- ------------------- ----------------------- --------------------- ------- -------- - ---------- ----- ------------ ------ ---------- ----------- ------------------- ----- -- -- ------ ---- -- -展开代码
- Gutters
Gutters 是一款基于 HTML5 的元素重置库,能够消除默认样式和消除差异。它的特点是设计美观、修饰简单,并能够快速应用到任何网站或应用中。
-- -------------------- ---- ------- -- -------------------------- ------- ----- -------------------------- -- ---- - ---------- ----- ------------ ------ ---------- ----------- - ----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- -- - ------- -- -------- -- ------- -- -------- -- ---------- ----- --------------- --------- ----------- ------------ - -- -------------------------- ------- ------ -------------------------- -- ---------- - ------- - ----- -------- - ----- ---------- ------- ----------- ----------- - ------------ ---------- - -------- --- -------- ------ ------ ----- - ------- - ------ ----- ------------ ----- ------------- ----- ----------- ----------- -展开代码
- UNCSS
UNCSS 是一款能够自动消除没有使用的 CSS 的库,它能够帮助我们减小样式表的大小,同时提高应用的性能。它的使用十分简单,只需要将你的样式表和应用一起运行即可。
-- -------------------- ---- ------- -- -------------------------- ------- ------ -------------------------- -- ---- - ---------- ----- ------------ ------ ---------- ----------- - --- --- --- --- --- -- - -------------- ----- - - - -------------- ----- - ------- ------------------- ----------------------- --------------------- ------- -------- - ---------- ----- ------------ ------ ---------- ----------- ------------------- ----- - -- -------------------------- ------ ------ -------------------------- -- -- ---- -- -------- - -------------- ---- - -- --- -- ---------- - -------------- --- ----- ----- - -- ---- -- ------------ - ------------ --- ----- ----- - -- ---- -- ------------- - ------------- --- ----- ----- - -- --- -- ----------- - ----------- ----- - -- --- -- -------------- - -------------- ----- -展开代码
以上是我们为大家推荐的 10 个优秀的 CSS Reset 代码,它们拥有不同的特色和优势,可以根据自己的需求进行选择和使用。在使用时,请注意库的稳定性和兼容性,同时尽量减小代码的体积,提高应用的性能。希望这篇文章能够为你带来帮助,谢谢阅读。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/67c05fd1314edc26846c478a