发表于： 2018-12-09 21:25:08
1 807
今天完成的事：
1.什么是css模块化开发
模块化开发
页面不改，我们还是只引用那一个样式，style.css，但是文件内容改成如下样式：
/*xxx页面入口样式文件style.css*/
@import './css/base.css';/*页面基础样式*/
@import './css/index.css';
@import './css/header.css';
@import './css/footer.css';
……
这里，我们把style.css中混乱的样式划分成了一个一个的子文件，作为模块。可以看到，作为示例，我把页面的一些reset样式以及一些站点公用样式放在了css目录下的base.css中，把页头拆分成header.css，把页面的基础布局都放在了index.css这个文件中，底部的样式放在了footer.css。然后相应的代码就在对应的模块中写，是不是看起来简洁、好维护很多呢？
不光是简洁，使用@import形式的模块化还有下列好处：
1. 浏览器原生支持
2. 方便删除某个模块
3. 便于管理各种日常需求
4. 方便合作开发
5. 方便多人协作
依赖写在入口文件，而不是打包脚本的配置文件。这样开发和打包分离，新加、减少模块不需要去修改打包配置，方便多人协作。
使用@import语法应注意事项：
@import "./css/style1.css";
这里我个人建议就用相对路径就好了，当然也支持线上和本机绝对路径，只不过想对路径有利于团队协作。
一定要注意，CSS规范中，@import必须放在其他样式之前，比如：
@import "./css/style.css";
@import "./css/style2.css";
body{
margin:0px;
padding:0px;}
2.为什么CSS也要组件化呢？
CSS是一种扁平的结构，一个Dom可能对应着一个CSS样式，而这些CSS样式很有可能出现公共的部分，那么提取这些公共的部分也就实现了CSS的组件化，在诸如less和sass出现之前，开发者都是把公共的CSS样式写成一个个公共class，但是这样之后CSS文件的阅读性就变得困难了，当然也不容易修改。而less和sass出现之后，使得CSS的编程可以定义变量，可以实现继承，CSS内容的结构也变得更加清晰，提高了CSS文件的阅读性，更容易让人理解，修改起来也变得简单。
3.前端组件化的4个原则
（1）标准性：任何一个组件都应该遵守一套标准，可以使得不同区域的开发人员据此标准开发出一套标准统一的组件。
（2）组合性：组件之前应该是可以组合的。我们知道前端页面的展示都是一些HTML DOM的组合，而组件在最终形态上也可以理解为一个个的HTML片段。那么组成一个完整的界面展示，肯定是要依赖不同组件之间的组合，嵌套以及通信。
（3）重用性：任何一个组件应该都是一个可以独立的个体，可以使其应用在不同的场景中。
（4）可维护性：任何一个组件应该都具有一套自己的完整的稳定的功能，仅包含自身的，与其它组件无关的逻辑，使其更加的容易理解，使其更加的容易理解，同时大大减少发生bug的几率。
明天计划的事：加紧进度，进行任务task14.15.
遇到的问题：提取轮播图的组件库 的时候不知道该怎么下手，好像需要用到js中的内容，可是js还没开始看呢..
收获：提取了任务14. 15的一些公共的css样式，学习什么是css组件化
返回列表
评论