许多时候 我一向老是发明自身在做一些一样的事变

千古困难
css
垂直居中
笔墨text-overflow

js
事宜双击

以至我愈来愈不知道自身 为何页面写的一遍又一遍 速率却一向没有什么改良

也许是要处置惩罚界面编写的题目了

重构

多斟酌一些人 做页面平常受制于

1. ui

2. 项目经理

3. 时候

4. 自身的才能

5. 。。。

实在这些题目 就是到现在我都是含糊的 关于html页面编写来讲

实在就是能够看作 只要string list map table chart imafe
这些罕见范例

这个列表 你怎么做

许多ui实在都是有毛病 关于前端

.list {
    &__item {
        margin-top: 10px
    }
}

每一个都去向上 才是简朴的 这个你怎么办

这个只是举例 方法许多 用 nth-child 简朴些

list 是个什么观点

就是 js 中的 array （最罕见用法）

.list {
    &__item {
        margin-top: 10px
        &:nth-child(1) {
            margin-top: 0;
        }
    }
}    

一个最大限定工作时候的就是 css 人人就算用了sass照样会写许多代码

实际上这些都能够经由过程 sass 举行处置惩罚

起首 sass 自身api 不是许多

人人能够尝试我的网络库 sassstd
另有就是 sassdash http://davidkpiano.github.io/sassdash/sassdoc/index.html#function-_set

@mixin com-zlui-nth-child($nums...) {
    $self: unquote("&");
    $selector: "";
    $len: length($nums);
    @for $i from 1 through $len {
        $num: nth($nums, $i);
        $selector: $selector + unquote("#{$self}:nth-child(#{$num})");
        @if $i < $len {
            $selector: $selector + ",";
        }
    }
    #{$selector} {
        @content;
    }
}

@mixin com-zlui-nth-of-type($nums...) {
    $self: unquote("&");
    $selector: "";
    $len: length($nums);
    @for $i from 1 through $len {
        $num: nth($nums, $i);
        $selector: $selector + unquote("#{$self}:nth-of-type(#{$num})");
        @if $i < $len {
            $selector: $selector + ",";
        }
    }
    #{$selector} {
        @content;
    }
}

@include com-zlui-nth-child(even, unquote("n+1"), 1, 2n) {

}
@include com-zlui-nth-of-type(odd) {

}

由于ide有提醒 所以能够很快写好 而且能够自定义语法 更疾速 更友爱

图片题目

less 一个很厉害的处所就是能够 读取图片的长度大小

这个 愿望人人运用我的库 sass-zhilizhili

关于这些题目 另有一个比较主要的题目

图片途径老是得不到

这个用postcss-assets能够处置惩罚

https://github.com/assetsjs/postcss-assets

text-overflow

笔墨肯定会有凌驾的题目

一般人人都会写一个代码

.text-overflow {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

然则这个是有条件的

如果block

这个前端日常平凡相对疏忽

自定义标签 才是最主要的

一个自定义标签 对应一个对象

有时候源码的复杂度老是那么大 大到没法设想