frontend

https://haobing.wang/html/
https://haobing.wang/css/
https://haobing.wang/javascript/

https://sailsjs.com/
http://yeoman.io/
https://webpack.js.org/

CSS

  • 预处理(Preprocessor):sass 和 less,弥补 css 弱编程能力,如变量、运算、继承、模块化等。
  • 后处理(Postprocessor):postcss 处理针对浏览器的需求,如 autoprefix 、自动 CSS Sprites 等。

如何书写可维护的 CSS:

  • 不要使用 id 选择器来设置样式(id 只应当用来连接 label 和对应 input 的联系)。
  • 使用 class 和 属性选择器来为元素添加样式。

JavaScript

  • 不用使用 id 作为选择器操作 dom。
  • 应该只使用 data 自定义属性来操作 dom 节点。

id

id 主要用于 label 和 input 配合,鼠标点击 label 的效果和直接点击 input 的效果一样。

例如,weui 中的对 checkbox 的重写样式,就着重用到了

<span class="weui-cells_checkbox">
    <label for="hello">hello
      <input id="hello" class="weui-check" type="checkbox" name="hello">
      <i class="weui-icon-checked"></i>
    </label>
</span>

weui 中为了重写 checkbox 的样式,主要思路是在 input 添加 .weui-checkinput 移除屏幕外,用 i 标签引入图标来表示未勾选的样式,再配合 .weui-check:checked 这个伪类来添加勾选之后的绿色背景来表示选中之后的样式。

.weui-cells_checkbox .weui-check:checked+.weui-icon-checked:before {
    content: '\EA06';
    color: #09bb07;
}

为了解决单击图标不能勾选,将 input 包裹在 label 中,在使用 label.forinput.id,实现

mobile

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Safari 上点击输入框浏览器会进行局部放大,为了禁止这种默认的行为,加上 user-scalable=no

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

新前端