最近打算重新从底部开始学习css。说起css，我一开始接触是通过黑马前端的课程，之后似乎就一直停留在了html、css结构混乱，因为我从不考虑可维护性、响应式，一上手就是div+class，然后就是flex布局，ok，搞定。进入公司之后，用的都是前辈写好的包和类，如果追求准点下班后啥也不干的平静生活的话，反而比没工作时更加难以提升了？
说句题外话，昨天翻到reddit论坛的老哥给那些在工作中发现自己无法接触新技术而困顿的人的建议是：可以利用自己的上班时间每天花至少1小时左右去写一个tech-demo，而不是下班后花时间去焦虑地学习。这是个实用的建议，不要因为带薪学习而有负罪，感毕竟不是每个人都有精力在下班后去学习，长时间地疲惫学习会导致不良的心理问题。我当时工作时的小组组长也是这么做的，每天上班时会抽些时间学习新技术，然后周五下午不碰功能点，而是直接学习新的技术栈。
闲话少说，上今天的总结。
响应式网页的CSS原则
不使用固定的单位 + 上下层依赖
使用rem、百分比、vh vw视口单位来代替px，多使用max-width、min-width这些属性来替代固定的width属性。
<div class="row">
<div class="col-1-of-2">
<!-- code-->
</div>
<div class="col-1-of-2">
<div class="composition">
<img class="composition__photo composition__photo--1" src="./images/nat-1-large.jpg" alt="photo">
<img class="composition__photo composition__photo--2" src="./images/nat-2-large.jpg" alt="photo">
<img class="composition__photo composition__photo--3" src="./images/nat-3-large.jpg" alt="photo">
</div>
</div>
</div>
对于以上的html结构:
-
将
row的max-width设置为114rem,当视口宽度小于114rem,则盒子宽度依赖视口变化。 -
将
col-1-of-2的width利用计算属性设置为(父盒子的总宽度-一个间隔宽度) / 2的宽度，此时该盒子的宽度依赖于row的宽度。 -
将最内层的
image的宽度设置为55%,使其也依赖于其父盒子composition（该元素为block布局，自动占满一行）的宽度。
通过这种方式，使得图片元素的宽度一层、一层得向上建立与视口大小的依赖，我们就可以实现缩小视口，图片也会跟着缩小的响应式的效果了。
sass 7-1pattern
7-1pattern是sass推荐采用的一种样式文件结构，具体说来就是将sass文件分为7个文件夹和一个main文件:
base: The base folder is something like a foundation style for the project. it just like something serves throughout the project. This includes the base, reset, typography, normalize.abstracts: Styles written in this folder do not compile to CSS. They are the helpers for other folders.Two major SASS Abstracts are variables and mixins.layout: The layout folder contains the style for a website layout.themes: Themes folder is related to an overview of the project look. It could be Light theme, dark theme, blue theme, etc.components: Components are a set of codes which has their character. It might be just one HTML element or a block of HTML elements. Alert box, button, label, badge, list group, panel, modal are some of the common components.pages:The pages folder contains the style for targeting pages.vendors:All the external styles or 3rd party styles are placed in the Vendor folder. usually some code to override the code from 3ed party just like bootstrape.
将这些文件夹统一导入到main.scss中，然后再统一再把main.scss编译为目标的css文件。在实际开发中，你可以有选择地使用这个开发模式。下面是一个实际项目的参考目录结构。
在每个文件夹下建立一个index文件，将同文件夹下所有文件导入到index中，这样只需在main.scss中导入index文件即可，这样我觉得结构会更加一目了然。
7-1 pattern的好处
7-1最直观的好处是代码的复用性更高了。
这里我举个例子。在以往，我们的margin往往是跟着我们的组件走的，比如说，我们有一个head-3类，它的灰色标题样式在网站的很多地方都会用到，唯一不同的地方在于这些灰色标题下方的间距可能不太一样。
那么最直白的方法就是给这些灰色自然段设置不同的margin-bottom，比如像下面这样：
但是如此一来，组件的可复用性就降低了。
7-1 推荐的做法是，可以考虑margin这些布局相关的代码移动出来，设置为单独的样式块。就像下面这样：
// /abstracts/utilities.scss
.u-margin-bottom-20{
margin-bottom: 2rem;
}
.u-margin-bottom-25{
margin-bottom: 2.5rem;
}
.u-margin-bottom-35{
margin-bottom: 3.5rem;
}
.u-margin-bottom-80{
margin-bottom: 8rem;
}
然后在html文件中，在head-3类外头套上一层专门的控制margin-bottom的标签。
这只是其中一个例子，将一些会影响布局的属性单独分离出组件代码是非常有利于提高可复用性的，使用7-1会推着我们这么去思考代码。
一些小坑
- transform can only be used by block and inline-block
- 渐变颜色文字和扭转动画效果的关键属性
