分类 代码如诗 下的文章

了解各种图片格式特性，根据特性制定图片规范，包括但不限于图片的质量约定、图片引入方式、图片合并处理等，旨在从图片层面优化页面性能。

- 阅读剩余部分 -

BEM的意思就是块（block）、元素（element）、修饰符（modifier），是由Yandex团队提出的一种前端命名方法论。这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义。BEM命名约定更加严格，而且包含更多的信息，它们用于一个团队开发一个耗时的大项目。

- 阅读剩余部分 -

Cookie

Cookie 是小甜饼的意思。顾名思义，cookie 确实非常小，它的大小限制为4KB左右，是网景公司的前雇员 Lou Montulli 在1993年3月的发明。它的主要用途有保存登录信息，比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。

localStorage

localStorage 是 HTML5 标准中新加入的技术，它并不是什么划时代的新东西。早在 IE 6 时代，就有一个叫 userData 的东西用于本地存储，而当时考虑到浏览器兼容性，更通用的方案是使用 Flash。而如今，localStorage 被大多数浏览器所支持，如果你的网站需要支持 IE6+，那以 userData 作为你的 polyfill 的方案是种不错的选择。

sessionStorage

sessionStorage 与 localStorage 的接口类似，但保存数据的生命周期与 localStorage 不同。做过后端开发的同学应该知道 Session 这个词的意思，直译过来是“会话”。而 sessionStorage 是一个前端的概念，它只是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但当页面关闭后，sessionStorage 中的数据就会被清空。

- 阅读剩余部分 -

昨天试了试微信的赞赏二维码，还不错，放博客上面说不定就有大佬给俺打赏了呢……

HTML代码，自己找地方放就好

<div class="support-author">
 <a class="support-btn" href="javascript:void(0)">打赏</a>
 <div class="support-content">
  <img src="图片地址" alt="微信打赏">
 </div>
</div>

- 阅读剩余部分 -

文件后缀名

Sass有两种后缀名文件：一种后缀名为sass，不使用大括号和分号；另一种就是我们这里使用的scss文件，这种和我们平时写的CSS文件格式差不多，使用大括号和分号。建议使用后缀名为scss的文件，以避免Sass后缀名的严格格式要求报错。

- 阅读剩余部分 -

方案1

使用官方的滚动行为，但是必须开启HTML5 history 模式，开启HTML5 history 模式需要后端进行一些配置；

对于所有路由导航，简单地让页面滚动到顶部：

scrollBehavior (to, from, savedPosition) {
  return { x: 0, y: 0 }
}

像浏览器的原生表现那样：

scrollBehavior (to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition
  } else {
    return { x: 0, y: 0 }
  }
}

方案2

没有使用HTML5 history 模式，需要使用官方的导航守卫中的router.beforeEach：

router.beforeEach((to, from, next) => {
  window.scrollTo(0, 0)  
  next()
});

一个简单的随机格言，先把下面的代码放在functions.php中：

/* 随机格言 */
function randomMaxims()
{
   $saying="";
   $notice = array(
      '海纳百川，有容乃大；壁立千仞，无欲则刚。',
      '势不可使尽，福不可享尽，便宜不可占尽，聪明不可用尽。',
      '忧劳可以兴国，逸豫可以亡身。',
      '静以修身，俭以养德。',
      '博观而约取，厚积而薄发。',
      '非淡泊无以明志，非宁静无以致远。',
      '业精于勤，荒于嬉；行成于思，毁于随。',
      '老当益壮，宁移白首之心；穷且益坚，不坠青云之志。',
   );
   $rand = array_rand($notice);
   $saying = $notice[$rand];
   echo $saying;
}

然后在需要展示的地方，粘上下面的代码：

<?php randomMaxims(); ?>

哦，对了，句子是我随便找了一些，需要添加的话，就按照格式自己添加就好了。

真正的问题是什么？

CSS即层叠样式表，所以一层一层覆盖其实是其本质特征。真正的问题在于维护，许多人认为CSS仅是样式，不是代码，无需维护，所以任意书写，只要将自己需要的样式的优先级设为最高即可，才导致了深层级CSS的出现，因为每次添加一个样式就必须比以前的优先级高才能在页面看到。深层级不仅造成维护性降低，可读性也是一个问题，人不是机器，无法很优雅的按优先级阅读，所以很难确认一个样式用于哪里，其实还存在许多的冗余样式，在任何地方都被覆盖的样式。这样的代码在扩展性上，一开始反而是有优势的，因为添加一个新class，无需担心影响其他地方，但慢慢随着项目规模的增大，页面增多，需要复制样式的地方也越来越多，它们之间又存在微小的差异，设计的更改，需求的变化，这一切都会将这种快餐式的CSS推进柏油坑。因为难以维护，所以无法响应需求，所以无法复用，只能复制，恶性循环。

正如上面所说的，问题在于可读性、维护性、扩展性、复用性这几个方面。所以只要提高它们就能解决问题, 虽然这么说，也不是如此简单的。先来谈谈在CSS中，这些概念都有着怎样的意义。

- 阅读剩余部分 -

  1. 1
  2. ...
  3. 7
  4. 8
  5. 9
  6. 10
  7. 11