嫌BEM命名太长——朴实无华的ITCSS的translation

567 阅读1分钟

ITCSS思想

ITCSS:本质是一种思想,按照选择器个性化的程度,将它归类在某一层(越往下个性化级别越高)。整个页面的样式分为了多个层级,每个样式必须写在符合它个性化级别的位置(层级)。

比较Original的图

translated之后的图

联系

每一层都是以上一层为基础(上面最通用,下面最特异)。通俗的概括:越个性化的样式放在越后面

优化前

无规律地覆盖样式↑

优化后

代码目录

使用:取每层的英文首字母小写(components → c   ; objects → o)。

.c-button、.o-media。一看 o-media 你就知道它影响的式布局,c-button 只影响了视觉表现。

常用方案:BEMIT(BEM + ITCSS,类名结合层)

感觉国内来说,这个命名思想还比较新,但是其实也可以尝试一下,毕竟使用过的人反馈都比较好。今晚想了很多的场景,不知道实际项目中用到会出现什么样的问题或者隐患,有这部分经验的小姐姐小哥哥们欢迎跟我沟通!~

附上一个我觉得让我理解通透的很关键的PPT

英语好的工友们冲 ↑