看了时尚且健壮: 实现更优秀的CSS
这篇文章之后的笔记。在思想上收获很大!也解答了作为新手的一些困惑,很有指导意义!
文章中,作者称之为基于组件的样式设计的实践,基于组件的样式设计方法的一个核心实践就是为网站创建一份样式指南。什么意思呢?我在这做一个简单的介绍,就是说我们每一个类似导航、列表等都有预制好的样式,我们写好组件的HTML之后,只要通过添加class就能做到改变组件样式的目的。
于是,我们需要建立一个属于自己的样式指南。当然,我们也可以引入Foundation或者Bootstrap这些现成的类库,提高开发效率。
1 不要编写任何CSS,而是选择Sass和Less这些CSS预处理器。
2 只对每个组件进行一次样式设计,确保每个组件的所有代码都放在一个单一的文件,例如_button.scss、_table.scss。
3 一致的标签:编写一致性更好的HTML就意味着减少CSS数量。
4 限定特定样式的范围,总免不了要写一些特定的CSS。(这点不太好表述)
5 Review你的CSS,删除并没有什么用的代码。
6 保持简单,不要过多的违背Internet的本义,尽量不要过于追求酷炫的元素组织方式。
7 响应式设计,移动优先。
最后,CSS越少,困难越少!