youku总结

Posted 2020-09-20

　　好几天，断断续续的，把youku首页的各种结构和功能都实现了一遍，总结一下；

　　

1. 拒绝通配符：以前听别人说用通配符取消所有元素的边距不好，我没觉得什么，但是这次发现了一个问题，不知道是浏览器bug还是什么原因，当在一个元素的后代选择器中使用通配符以后，在后面单独设置其中一些元素的属性时会不起作用。比如被通配符设置了以后的h2，再想单独设置其样式就会无效；不明缘由，但是为防止这种事故，还是避免使用通配符的好；
2. 反向选择器：以前没注意过这个选择器，但是这次在解决问题的时候使用了一下，确实很方便，尤其是在一对li中设置样式，如果标题的那个li样式不同，就可以使用反向选择器“：not（）”来对非标题（没有class=“title”）的li进行设置，避免优先级或者其他问题导致的样式设置无效；
3. 善用id和lclass：以前虽然明白二者的不同，但还是混乱使用，这次更是大量使用class，而且存在大量的多层后代选择器，不得不说，有些在页面中值出现一次的结构，给个id比较靠谱，而具体的内容，用class来设置，或者说，id管结构，class管美丑；尽量不使用多级后代选择器；
4. 管理组件库：虽然这只是一个页面，但还是在多次样式设置后发现了组件库的必要性，而要高效的发挥组件库的作用，标准就变得很重要，从组件命名，到分类管理，再到使用方法和修改方法，都值得细细规划，这绝对是拿到设计图之后必做的一项工作；
5. 原型分析：在写html相关文件以前，对原型设计图的分析很重要，这将决定文件结构，层次，甚至内外边距的设置；因为有些容器中没有通栏的内容，则可以设置padding，而有些会在中间或者底部出现通栏的区块，比如广告，这时候就要慎重padding的使用了，把广告条放进文档流，还是用绝对定位从文档流中取出，是个问题；而且写文档时，一定要遵循先写结构，在填充内容的原则，以避免文档混乱，也便于以后维护；
6. 慎用绝对定位和浮动：因为绝对定位和浮动会改变文档流，这会影响上下文结构的定位，如果被定位的元素与上下文存在排列关系，这个元素的绝对定位会给前后元素带来很多麻烦，弄不好一堆绝对定位，那么好了，维护的时候一定会被活活累死；
7. 正确理解边距和定位值：如果是相对定位，要注意与上下文的关系，能用padding和margin解决的绝不用left和top，因为后者会对前后文的元素定位产生影响，弄不好后面的元素都要使用left和top来调整位置，那么好了，工作量直线上升；
8. 先总后分写样式：首先在文档开头要对文档字体，常用a样式，ul样式等进行设置，然后在逐渐细化具体元素的样式，先总后分，先公后私；不仅仅能减少代码量，而且便于管理；但是公共样式要照顾全局，所以不能出现偏差和问题，也尽量不要使用通配符来进行元素选择；
9. 合理运用伪元素：伪元素是一件很酷的事情，但未必就高效，我刚开始用伪元素写三角和箭头，感觉完美，但是其实如果重复使用的话，还是写成组件来的效率高，还有一个问题，就是js无法选择到伪元素，这会带来一些麻烦，所以如果需要js来控制的话，一定不要使用伪元素；
10. 问题：

　　　　　　用div写的小三角，在旋转过渡的时候，会左右跳一下，也就一两个像素的距离，但是能看出来，而且不同浏览器跳的也不一样，定位和旋转原点是没有问题的，不明原因，或许跟三角尺寸有关系吧。下次实验一下；