发表于: 2019-01-18 23:39:19
1 684
今天完成:
1、大致完成任务十三
2、了解了组件库的概念
明天计划:
1、继续做任务十六
2、了解轮播图和栅格系统
遇到的问题:
收获:
1、什么是CSS Reset ?要用到CSS Reset的原因是?
CSS Reset简单来讲就是根据我们自己编写页面的需求重新设置css属性(废话,这个当然大家都知道!可是我重点想说的是css reset的原因耶~)css reset主要是因为html标签在浏览器中都有各自的默认样式,不同浏览器的默认样式之间也会有差别,通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。最最简 单的说法就是把浏览器提供的默认样式覆盖掉!这就是CSS reset。
2、关于CSS样式分离
CSS样式分离,一般指的是“以单独的CSS文件将CSS样式分离出来”,此处的重用多针对不同页面的重用,就是说,一个样式文件,可以多个页面使用,这对于一些公共样式的重构是很有用的。当然,对于一些重要的页面,例如淘宝首页,直接将CSS嵌在了页面头部,其降低链接请求的重要性要大于样式的重用。
CSS样式分离之再分离
表型上的两个特点为“分离”和“命名”,掌握与理解其深层次思想的关键是思维方式的转变,这包括“CSS库概念”意识。要想让样式再分离发挥其最大的功效,对其精髓思想有着较为深入的理解是很必须的,否则,您可能会用的很痛苦,或是滥用而产生其他一些问题。
样式彻底分离的副作用
如果我们把所有的CSS样式进行拆分。对于一些复杂的UI效果,例如圆角自适应的导航,则此处的HTML代码开销会非常之大,此时一味的样式再分离,会使得HTML代码变得很痛苦。可以肯定的是,所有样式都要分离显然是不行的,更加可以肯定的是,目前基本上所有的网站的样式的分离都是不够的,远远不够,CSS也是需要架构的,而没有架构这一意识,分离反而会出问题。
具体的规则
1. 总是类名优先
2. 组件代码放在一起
当使用一个组件的时候,如果所有和组件相关的资源(其 JavaScript 代码,样式,测试用例,文档等等)都可以非常紧密地放在一起,那就更好了:
3. 使用一致的类命名空间
4. 维护命名空间和文件名之间的严格映射
评论