ITCSS思想
ITCSS:本质是一种思想,按照选择器个性化的程度,将它归类在某一层(越往下个性化级别越高)。整个页面的样式分为了多个层级,每个样式必须写在符合它个性化级别的位置(层级)。
比较Original的图
translated之后的图
联系
每一层都是以上一层为基础(上面最通用,下面最特异)。通俗的概括:越个性化的样式放在越后面。
优化前
无规律地覆盖样式↑
优化后
代码目录
使用:取每层的英文首字母小写(components → c ; objects → o)。
.c-button、.o-media。一看 o-media 你就知道它影响的式布局,c-button 只影响了视觉表现。
常用方案:BEMIT(BEM + ITCSS,类名结合层)
感觉国内来说,这个命名思想还比较新,但是其实也可以尝试一下,毕竟使用过的人反馈都比较好。今晚想了很多的场景,不知道实际项目中用到会出现什么样的问题或者隐患,有这部分经验的小姐姐小哥哥们欢迎跟我沟通!~
英语好的工友们冲 ↑