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

简单易用的CSS命名规范和JS代码风格

时间:2023-03-31 01:16:24 CSS

这是我的个人博客,有兴趣的可以去看看,说不定会有收获。CSS命名约定BEM命名法BEM(Block,Element,Modifier)是Yandex团队提出的一种前端命名约定。它的核心思想是将页面拆分成独立的语义块(blocks),使得团队开发复杂项目的效率更高,也非常有利于代码复用。即使团队引入新成员,也很容易维护。Block就是一个块,比如div、header,可以嵌套重复使用。严格来说,不能影响自己的布局。最好不要设置margin和position,也不要使用元素选择器和ID选择器。Element是一个元素,比如input,p。它是块的一个组成部分。Modifier是定义Block和Element的外观、状态或行为的修改。当然这部分不是必须的,可以省略。Block和Element的连接是通过__,Element和Modifier的连接是通过--整体连接是Block__Element--Modifier什么时候用Element什么时候用Block如果一段代码可能会复用,不依赖于页面的其他组件,此时可以使用Block,反之,可以使用Element。推荐JavaScript代码风格,看Airbnb地址。