当前位置: 首页 > Web前端 > CSS

BEM实战微信个人页面

时间:2023-03-30 13:50:08 CSS

一、BEM简介BEM——前端命名方法论BEM是Yandex团队提出的一种前端命名方法论。它是一个非常有用的、强大的、简单的命名约定,可以让你的前端代码更容易阅读和理解、更容易协作、更容易控制、更健壮和明确、更严谨。BEM命名约定mode.block{}.block__element{}.block--modifier{}其中.block:表示一个抽象块,或者说是一个独立的组件。block__element:element是.block的子节点,表示该元素属于某个.block,用来作为一个整体组成一个完整的.block,__是降级的意思。block--modifier:表示某个节点的状态我看了一下微信个人页面,图标来自Iconfont矢量图标库,图标名直接使用我一开始设计的html的原名.这时候我对BEM有了一些了解,但是在使用中还是遇到了一些问题。这时,我将整个页面看成一个模块,分成三部分:page__hd,page__bd,page__ft微信

***
***
******
    ************
************但是当一个模块里面的部分比较多的时候,比如page__bd里面的元素,我觉得我的命名有点乱,为了给it的命名还得百度翻译一下,等我命名后开始写css的时候,发现还是我不知道它的位置。写好css后,发现还有.right等没用到的类名。我修改了我的html的命名,感觉结构更清晰了。我也观察了微信页面。head和bottom没有变化,每个page都是一样的,page__bd中的page__bd__list在微信的发现页也有,所以命名更容易复用微信EIVE

w1074418022

</div>

微信

通讯录

发现

3.总结一下我使用BEM命名的感受。第一:让你的代码更易于阅读和理解,并且能够清楚地表明某个节点属于哪个区块,层级关系更加明显。也尽量避免使用节点携带的内容来定义节点,这样才能更好的复用某个模块其次:BEM的降级关系不需要急用,比如page__hd中的.title,因为一个页面只有一个title,所以用page__title来表示,不需要用page__hd__title第三:使用BEM是为了让我们的代码更清晰,更容易维护。如果它使您的代码更难维护和理解,您不必担心。github项目地址:https://github.com/EIVE/wx_ho...以上是我学习BEM的心得,希望大家有所收获,可能有不妥之处,还望大家多多指教