首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

带有BEM - Class的Sass linter应以小写形式书写,并带连字符

BEM - Class是一种命名规范,用于在HTML和CSS中定义块、元素和修饰符的类名。BEM代表块(Block)、元素(Element)和修饰符(Modifier)。它的目的是提供一种一致且可维护的方式来命名和组织CSS类,以便更好地管理和扩展代码。

Sass是一种CSS预处理器,它引入了许多功能和语法糖,以提高CSS的可维护性和可重用性。Sass linter是一种工具,用于检查Sass代码中的语法错误、潜在问题和代码风格违规。

对于带有BEM - Class的Sass linter,它应以小写形式书写,并带连字符。这是因为BEM - Class的命名约定中,块、元素和修饰符的类名都应该使用小写字母,并使用连字符(-)来分隔单词。这种命名约定有助于提高代码的可读性和一致性。

推荐的腾讯云相关产品和产品介绍链接地址:

这些产品可以帮助开发者在云计算环境中更好地管理和维护Sass代码,提高代码质量和开发效率。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

团队分享,Bem规范调研及实践

事实上: 从右到左进行匹配,遍历页面上每个 li元素确定其父元素 #ul-id li {} 所以不要让你css超过三层。...success"> 通过 BEM 命名方式,模块层级关系简单清晰,而且 css 书写上也不必作过多层级选择。...上面我们每个样式都要写一遍 card,如果 card 换成一个比较长单词,这样也太冗长了,这也是大家不太喜欢 bem 一个原因,但这个 sass 或 less 是很好解决,我们可以用 & 表示根元素...module.exports = {}; 为了让小伙伴编写符合 Bem 规范,这里我们使用 stylelint-selector-bem-pattern 插件,它结合了插件 postcss-bem-linter...,其实就是指定class名称规则 * 支持正则字符串、返回正则函数、包含2个选项参数对象等写法 */ componentSelectors

79810
  • 编写灵活、稳定、高质量CSS代码规范

    在扫描文档时,小写字符易于分辨,因为他们形式更易于区分。 (12)尽量使用简写形式十六进制值,例如,用 #fff 代替 #ffffff。...五、前缀属性 5.1 垂直对齐 当使用特定厂商带有前缀属性时,通过缩进方式,让每个属性值在垂直方向对齐,这样便于多行编辑。 5.2 Example ?...九、Less 和 Sass操作符 为了提高可读性,在圆括号中数学计算表达式数值、变量和操作符之间均添加一个空格。 ? 十、注释 10.1 注意 代码是由人编写维护。...十一、class 命名 11.1 规范 (1)class 名称中只能出现小写字符和破折号(dashe)(不是下划线,也不是驼峰命名法)。...(4)只有在必要时候才将 class 限制在最近父元素内(也就是后代选择器)(例如,不使用前缀 class 时 -- 前缀类似于命名空间)。 12.2 Example ?

    1.2K20

    前端代码规范

    除非有强烈特殊需求,否则最好是设置为 edge mode,从而通知 IE 采用其所支持最新模式。 ? 六、字符编码 通过明确声明字符编码,能够确保浏览器快速容易判断页面内容渲染方式。...在扫描文档时,小写字符易于分辨,因为他们形式更易于区分。 (12)尽量使用简写形式十六进制值,例如,用 #fff 代替 #ffffff。...五、前缀属性 5.1 垂直对齐 当使用特定厂商带有前缀属性时,通过缩进方式,让每个属性值在垂直方向对齐,这样便于多行编辑。 5.2 Example ?...九、Less 和 Sass操作符 为了提高可读性,在圆括号中数学计算表达式数值、变量和操作符之间均添加一个空格。 ? 十、注释 10.1 注意 代码是由人编写维护。...十一、class 命名 11.1 规范 (1)class 名称中只能出现小写字符和破折号(dashe)(不是下划线,也不是驼峰命名法)。

    2.5K31

    「前端工程四部曲」模块化前世今生(下)

    - 符号,这个是为了让你自己视图块可以用单个字符来界定,__ 代表元素,-- 代表修饰符。...当然这个编译手段有很多,但目的相同,都是让两个名字相同 class 互不干扰,拿我们常用 Vue 举例子: 上图即 Vue-cli 运行被编译后代码,我们可以很清晰看到,编译后 html 标签带有...而 Vue 这种 CSS Modules 实现形式,恰好使用到了上面我们所说 AMCSS。...其次也解决了 CSS 嵌套过深问题,正是因为全局命名冲突问题,我们不得已就要为 class 加上一些独立命名空间,书写时也会多层嵌套。...CSS 书写方式等等,这些其实可以配合前文我们说 BEM、ACSS 等一些约束,就可以很好控制。

    72220

    CSS 就是这么可爱——如何组织 CSS

    Web 社区也已经存在了多种工具和方法,来帮助开发者管理大 CSS 项目。我们可以借鉴调整为适合我们自己书写方式。但在这之前,我们需要明确几个 CSS 书写原则。...__footer"> 确定   上面这段代码就较好使用 BEM...如果你个人喜好跟规范相冲突,那么还是请遵守规范,因为别人或许不喜欢你风格。 2. 保持统一   当你开始进行需求开发书写 CSS 代码时,最重要是保持各方面的统一。...如果你使用了一个不存在于代码里面的字符串,你可以从段落到段落间跳转,只需要搜索一下,下面我们用是||。...例如,你也许会有像是下面的选择器那样代码,它在带有main类里面的带有box类上应用了规则。

    63630

    20 个强大 Sublime Text 插件

    这是一个非常简单FTP同步工具,它可以控制上传目标的多重命名。让我们知道您想法。 19. SASS Build SASS Build 是一个编写CSS预处理器。...你只需按约定 缩写形式书写而不用写整个代码,然后按“扩展”键,这些缩写就会自动扩展为对应代码内容。...新版本显然带来了很多新有所不同功能,而不是简单地把所有的Linter 放在一个包中,开发者允许用户在升级时选择安装自己经常使用Linter。很明显,这可以节省磁盘空间。...Snippets Snippets,你一定已经听说了,可以帮你快速书写代码。但它不是像上面提到插件那样使用缩写,它是重用代码块以节省您时间。你甚至可以创建自己代码段,这完全取决于你自己。 1....其他语法支持 如果有一个SublimeText本身所语言包不包含语言,它就无法显示适当语法高亮。这些语言包括LESS,Sass,SCSS,Styls和Jade(或其它)。

    1.6K60

    flutter代码风格指南

    使用分隔符这种形式可以保证命名可读性。使用下划线作为分隔符可确保名称仍然是有效Dart标识符, 如果语言后续支持符号导入,这将会起到非常大帮助。...我们之所以不再使用,是因为: •SCREAMING_CAPS 很多情况下看起来比较糟糕, 尤其类似于 CSS 颜色这类枚举值•常量常常被修改为 final 类型非常量变量, 这种情况你还需要修改变量名字为小写字母形式...•在枚举类型中自动定义 values 属性为常量并且是小写字母 形式 要把超过两个字母首字母大写缩略词和缩写词当做一般单词来对待 首字母大写缩略词比较难阅读, 特别是多个缩略词连载一起时候会引起歧义...考虑缩短局部变量名或者将表达式抽取为一个新局部变量。换句话说,你应该做一些手动格式化增加代码可读性修改。...dartfmt 不会把很长字符串字面量分割为 80 个字符列, 所以这种情况你需要自己手工确保每行不超过 80 个字符。 对于包含 URIs 字符串则是一个例外—主要是导入和导出语句。

    1.2K20

    如何使用CSS命名规范提高您编码效率

    命名规范示例包括:kebab-case(使用小写字母和字符表示),camelCase(首字母小写,多个单词时,后续单词首字母大写),以及PascalCase(所有组成名称单词首字母都大写)。...BEM(块、元素、修饰符):BEM是一种流行CSS命名约定,由俄罗斯科技公司Yandex开发,旨在提供一种模块化CSS样式方法,提供代码可重用性,使大规模CSS维护成为可能。...这些通常是包裹子元素父级/顶级元素。块使用小写字母和字符表示。例如:.nav , .header , .carousel , .card 等。...,它们以双连字符前缀(—)表示。...标准化命名和前缀:采用统一命名约定(例如,BEM块名称或原子CSS类)应该在整个项目中标准化,保持一致性。

    39030

    CSS 预处理器中循环

    每个人在讨论模式库以及模块化设计时候,大部分人关注点是 CSS 选择器。无论你使用哪种模式选择器(BEM、OOCSS、SMACSS 等等),循环可以使设计模式易读并且可维护,直接编译到代码中。...PostCSS 允许书写分享你自己预处理器语法。如果你愿意,你可以在 PostCSS 中重写 Sass 或者 Less,但是 已经有人在你之前这样做了。 循环条件 星际迷航并非完全虚构。...for-each 循环是 for 循环一种形式, 它们也是 while 循环一种形式。但是大多数使用场景可能需要更具体分类。...其中一个例外是生成编号选择器,可以是 nth-child (像我们上面做一样),也可以是自动生成类名(通常用在栅格系统中)。我们将创建一个简单不带间距响应式栅格系统。...我还想把单色列表转换成预处理器可以编译调色板。我需要一种方法保证所有数值是相关联并且是一种模式。我使用方法是在单独 Sass map 中,以键值对形式存储主题颜色。

    4.4K60

    编写模块化CSS:命名空间

    假设我把上面的代码转换成一个带有命名空间代码。HTML将完全相同(只加了少数class前缀)。 在这个例子中要特别注意.o和.c前缀: ? .o-和.c-是什么意思呢?...那么,看看在这种情况下插入所有“必需”BEM class情况下会发生什么,你会注意到“HTML开始膨胀”: ? 最后一点:Harry使用对象命名空间(.o-)来表示这样结构布局。...我只是将它们分组成.l-,使用.o-来代替别的东西。 以上,让我们转移到对象(objects)上(我版本)。...组件是上下文感知 让我们来看看这些属性,我会补充你所需要例子。 组件可以包含其他对象和组件 让我们回到我所说关于布局形式。 下是组件完美示例。 ?...这些可爱课程来自SMACSS(如果你想知道的话)。 当您在CSS中设计状态类时,建议您尽可能保持样式接近所讨论对象/组件。 例如: ? 如果您不用Sass,你可以用这种方式来书写CSS: ?

    2.7K70

    前端系列13集-内置内容,单文件组件,进阶 API

    如果你想让 v-html 内容也支持 scoped CSS,你可以使用 [CSS modules]或使用一个额外全局  元素,手动设置类似 BEM 作用域策略。...最常见用例就是显示原始双大括号标签及内容。 在随后重新渲染,元素/组件及其所有子项将被当作静态内容跳过渲染。这可以用来优化更新时性能。 仅渲染元素和组件一次,跳过之后更新。 <!...但它们并非真正组件,同时在模板编译期间会被编译掉。因此,它们通常在模板中用小写字母书写。 按注册名渲染组件 (选项式 API): import Foo from '.... class: 'bar', innerHTML: 'hello' }) // class 与 style 可以像在模板中一样 // 用数组或对象形式书写 h('div', { class: [foo..., { bar }], style: { color: 'red' } }) // 事件监听器应以 onXxx 形式书写 h('div', { onClick: () => {} }) // children

    30820
    领券