前端架构设计 6.2分
读书笔记 引言
Xovee

第一部分 引言

内容很重要

RWD

参与整个项目开发进程

第一章 前段架构设计

第三章 前段架构的核心

代码

流程

测试

文档

第二部分 代码核心

第四章 HTML

模块化标记

可复用的CSS类名

块名_元素--修饰符(BEM)

第五章 CSS

模块化

单一职责原则(不能即负责A模块又负责B模块)

组件修饰符(见代码)

<div class="blog">
<h2 class="blog-header">This is a Blog Header</h2>
...
<div class="calendar calendar--nested">
<h2 class="calendar-header">This is a Calender Header</h2>
</div>
</div>
/* calendar.css */
.calendar-header {
color: red;
font-size: 2em;
}
.calendar--nested .calendar-header {
font-size: 1.6em;
}
/* blog.css */
.blog-header {
color: red;
font-size: 2.4em;
}

第六章 JavaScript

也许不需要框架

函数复用性

第七章 Red Hat 代码

过多的依赖

严重的位置依赖问题

每个标签指定唯一的选择器

单一责任原则

样式只有单一的来源

可选的修饰符(sass,data-)(见代码)

修饰符同时也是上下文

语言化的网格,分离布局和组件

<div class="exampleContainer">
<div class="rh-card--layout" data-rh-theme="dark" data-rh-justify="center"></div>
</div>
<!-- card.scss -->
.rh-card--layout {
padding: 30px;
&[data-rh-theme="light"] {
background: white;
}
&[data-rh-justify="center"] {
...
}
}
0
《前端架构设计》的全部笔记 4篇
豆瓣
我们的精神角落
免费下载 iOS / Android 版客户端