BEM的意思就是块(block).元素(element).修饰符(modifier),是由Yandex团队提出的一种前端命名方法论.这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义.BEM命名约定更加严格,而且包含更多的信息,它们用于一个团队开发一个耗时的大项目. 重要的是要注意,我使用的基于BEM的命名方式是经过Nicolas Gallagher修改过的.这篇文章中介绍的这种命名技术并不是原始的BEM,但却是一个我更喜欢的改进版.无论实际使用了什么样的符号,它们其实都是基于…

人们问我最多的问题之一是在CSS类名中“--”和“__”是什么意思?它们的出现是源于BEM和Nicolas Gallagher... BEM的意思就是块(block).元素(element).修饰符(modifier),是由Yandex团队提出的一种前端命名方法论.这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义.BEM命名约定更加严格,而且包含更多的信息,它们用于一个团队开发一个耗时的大项目. 重要的是要注意,我使用的基于BEM的命名方式是经过Nicolas Gallagh…

Part.1 何为 BEM? BEM :Block ( 块 ) 丶Element ( 元素 ) 丶Modifier ( 修饰符 ) 出 处:是由 Yandex 团队提出的一种前端命名方法论 优 点:命名方式条理清晰丶易懂:更加适用于团队合作项目 Part.2 例如 .block{} .block__element{} .block--modifier{} .block 最高级-块 .block__element 代表.block的后代 .block--modifier代表.block的不同状态或…

前言 最近学习了阮一峰老师的<ECMAScript 6 入门>里的Generator相关知识,以及<你不知道的JS>中卷的异步编程部分.同时在SegmentFault问答区看到了一些前端朋友对Generator的语法和执行过程有一些疑问,于是我想分享一下自己对Generator的理解,也许对前端社区会有所帮助. Generator本质 Generator的本质是一个状态机,yield关键字的作用是分割两个状态,右边的语句执行在前一个状态,而左边的语句是下一个状态要执行的.如果右边为…

虽然写过很多css代码,但每次动手写都让我痛苦不堪,如何组织好那一堆堆的代码,如何提高代码复用率,甚至如何命名类,这些都让我纠结.下面的浅显的谈一谈在看了<编写高质量代码>中的html和css部分以及搜索网络上一些相关资料对编写高质量的HTML和CSS的一些基本认识. HTML 在说css之前必须先说说html ,没有它css是浮云.就像是要建栋别墅,光有那些装饰品(css)没有房子基本的结构(html)是不可能造出真正好看又实用的别墅的.其实html结构并不是简单的table或一堆堆的div…

BEM思想 1. 什么是BEM: BEM:(Block块,Element元素,Modifier修饰符)一种命名规范, 其核心思想是将页面拆分成一个个独立的富有语义的块(blocks),从而使得团队在开发复杂的项目变得高效,并且十分有利于代码复用,即便团队引入新成员,也容易维护. 基本命名模式 block{}, block__element{}, block--modifier{}, 2. BEM各元素: * Block :Block是逻辑和功能独立的单元,类似于组件.每个block包含自身的行为…

好多盆友 非常纠结 css命名规则 怎么弄,还没起步就被绊住了.那么今天蝈蝈就针对这个问题来讨论一下 没什么技术 含量.但却对效率开发至关重要的 "问题". 下文是一些知乎大神的个人经验总结,假设认为实用请点赞 留言!    JS前端实用开发QQ群 :147250970  欢迎添加~! 怎样看待 CSS 中 BEM 的命名方式? BEM的意思就是块(block).元素(element).修饰符(modifier),是由Yandex团队提出的一种CSS Class 命名方法. 相似于:…

Why use it 近几年web应用的发展可以用疯狂来形容,依靠浏览器的支持以及前端技术和框架的发展,很多应用已经把大量的逻辑从服务器端迁移到了浏览器端,使用前后端分离技术,浏览器端与用户进行交互来完成复杂的逻辑.由于这个发展趋势,Web应用的前端代码的复杂度大大提高,尤其是 JavaScript 和 CSS 代码的数量大幅增加,面对空前庞大的css和js代码量,形成科学的代码组织方法和命名规范迫在眉睫. 好的命名规则应该满足以下几个优点: 安全的命名,不会干扰其它css 我需要很快知道一个…

好吧,将 BEM 简单的解释为 “Block-Element-Modifier“, 其实是个不负责任的做法.鬼知道 Block 是什么啊?所以,看了一些似懂非懂的中文解释之后,自己还是得去找些英文来读一读,顺便总结一下. 本人对 HTML.JavaScript.CSS 其实都只是一知半解,所以,如果有理解不到位的,还望各位看官斧正.但是,本着“要学就要学最先进”的原则,即使是基础不扎实,还是要冲着更有效率的方式前进. 有不想看我罗嗦的看官,可以直接看下面这篇文档: https://css-tri…

css的缺陷 我们知道,css使用中一个比较令人烦恼的问题,就是css没有作用域可言,我们写了一个组件或者模块之后,往往希望它们可以四处复用,但是由于css没有作用域,我们给样式命名的时候都会非常小心,因为害怕命名重复导致组件的样式被覆盖.于是,每个新加入项目的开发者在开发类似已有的组件时,很可能就自己重新命名一份新的样式表,以免和现有的重复,那么就会导致css文件像滚雪球一样越来越大. 现在市面上有许多旨在减少CSS代码量,且方便程序员合作和维护CSS代码的方案,例如OOCSS.SMACSS.…