事实上: 从右到左进行匹配，遍历页面上每个 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
- 中划线 ：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。...使用两个连字符和下划线而不是一个，是为了让你自己的块可以用单个连字符来界定。...> div> 复制代码 通过 BEM 命名方式，模块层级关系简单清晰，而且 css 书写上也不必作过多的层级选择。...important; } 2.2 在 CSS 预处理器中使用 BEM 格式 BEM 的一个槽点是，命名方式长而难看，书写不雅。相比 BEM 格式带来的便利来说，我们应客观看待。...而且，一般来说会使用通过 LESS/SASS 等预处理器语言来编写 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 ?
一般来说，它们基于 CSS 扩展了一套属于自己的 DSL，来解决我们书写 CSS 时难以解决的问题： 语法不够强大，比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器 没有变量和合理的样式复用机制...，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。...Sass、LESS、Stylus 是目前最主流的 CSS 预处理器，它们本质上是一种编译器。此处以 Sass 为例，它支持 .scss，.sass 文件类型。...BEM通过简单的块、元素、修饰符的约束规则确保类名的唯一，同时将类选择器的语义化提升了一个新的高度。...此处通过localIdentName修改哈希名称为 Appapp_3lRY_ 的形式。
CSS模块化方案——BEM BEM，三个字母分别代表 Block、Element、Modifier，BEM 也是在 2009 年提出，起源于 Yandex（可以说是俄语版的 Google）。...BEM的核心概念是 —— 块（Block）由子元素（Element）构成，并且可以修改（Modified）。...BEM 命名约定： .block-name__element--modifier 名称以小写字母书写 名称中的单词用连字符（-）分隔 元素由双下划线（__）分隔 修饰符由双连字符（--）分隔 一个 BEM...另一个 BEM 例子： class="widget"> class="widget__header">Sterling Calculator <form...modules 后缀】 const {extname} = require('path'); const CSS_EXTNAMES = ['.css', '.less', '.sass', '.scss
除非有强烈的特殊需求，否则最好是设置为 edge mode，从而通知 IE 采用其所支持的最新的模式。 ? 六、字符编码 通过明确声明字符编码，能够确保浏览器快速并容易的判断页面内容的渲染方式。...在扫描文档时，小写字符易于分辨，因为他们的形式更易于区分。 （12）尽量使用简写形式的十六进制值，例如，用 #fff 代替 #ffffff。...五、带前缀的属性 5.1 垂直对齐 当使用特定厂商的带有前缀的属性时，通过缩进的方式，让每个属性的值在垂直方向对齐，这样便于多行编辑。 5.2 Example ?...九、Less 和 Sass 中的操作符 为了提高可读性，在圆括号中的数学计算表达式的数值、变量和操作符之间均添加一个空格。 ? 十、注释 10.1 注意 代码是由人编写并维护的。...十一、class 命名 11.1 规范 （1）class 名称中只能出现小写字符和破折号（dashe）（不是下划线，也不是驼峰命名法）。
命名空间思想 没有选择 BEM 这种命名过于严苛及样式名过长过丑的规则，采取了一种比较折中的方案。...不建议使用下划线 _ 进行连接 节省操作，输入的时候少按一个 shift 键 能良好区分 JavaScript 变量命名 字符小写 定义的选择器名，属性及属性值的书写皆为小写。...margin: 0px auto margin: 0 auto 十六进制的颜色属性值使用小写和尽量简写。...> Visual 的顺序书写，提高代码的可读性。...SASS 使用建议 嵌套层级规定 使用 SASS 、 LESS 等预处理器时，建议嵌套层级不超过 3 层。
- 符号，这个是为了让你自己的视图块可以用单个连字符来界定，__ 代表元素，-- 代表修饰符。...当然这个编译手段有很多，但目的相同，都是让两个名字相同的 class 互不干扰，拿我们常用的 Vue 举例子： 上图即 Vue-cli 运行被编译后的代码，我们可以很清晰的看到，编译后的 html 标签带有...而 Vue 的这种 CSS Modules 实现形式，恰好使用到了上面我们所说的 AMCSS。...其次也解决了 CSS 嵌套过深的问题，正是因为全局命名冲突的问题，我们不得已就要为 class 加上一些独立的命名空间，书写时也会多层嵌套。...CSS 书写方式等等，这些其实可以配合前文我们说的 BEM、ACSS 等一些约束，就可以很好的控制。
BEM为例说下： BEM是一套针对css类样式的命名方法。...其他命名方法还有：OOCSS、AMCSS、SMACSS等等 BEM全称是：Block Element Modifier 一个完整的BEM类名：block__element_modifier，例如：banner.../ less中文文档2（非官方）：https://less.bootcss.com/ sass官网：https://sass-lang.com/ sass中文文档1（非官方）：https://www.sass.hk...是一个多行的（数组形式的）标准字符串。...: 排除掉版本号小于等于8的IE浏览器 ☛默认情况下，匹配的结果求的是并集。
Web 社区也已经存在了多种工具和方法，来帮助开发者管理大的 CSS 项目。我们可以借鉴并调整为适合我们自己的书写方式。但在这之前，我们需要明确几个 CSS 书写原则。...__footer"> class="sctions-comfirm"> 确定 上面这段代码就较好的使用 BEM...如果你的个人喜好跟规范相冲突，那么还是请遵守规范，因为别人或许不喜欢你的风格。 2. 保持统一 当你开始进行需求开发并书写 CSS 代码时，最重要的是保持各方面的统一。...如果你使用了一个不存在于代码里面的字符串，你可以从段落到段落间跳转，只需要搜索一下，下面我们用的是||。...例如，你也许会有像是下面的选择器那样的代码，它在带有main类的里面的带有box类的上应用了规则。
(如导航栏等)使用BEM规则。...(待讨论) 解释： BEM是一种命名方法，能够帮助你在前端开发中实现可复用的组件和代码共享。...> Visual（视觉效果） 的顺序书写，以提高代码的可读性。...解释： 带有alpha的颜色信息可以使用 rgba()。使用 rgba() 时每个逗号后必须保留一个空格。....success { background-color: #aca; } /* bad */ .success { background-color: #aaccaa; } [建议] 颜色值中的英文字符采用小写
Fantastic Great .example { color: blue; } 大小写 以下都应该用小写： HTML 元素名称，属性，属性值（除非...实体引用 如果团队中文件和编辑器使用同样的编码方式，就没必要使用实体引用，如 —， ”，☺，除了一些在 HTML 中有特殊含义的字符（如 的字符...font-size: .8em; 16进制表示法 /* Not recommended */ color: #eebbcc; /* Recommended */ color: #ebc; 前缀 使用带前缀的命名空间可以防止命名冲突....adw-help {} /* AdWords */ #maia-note {} /* Maia */ ID 和 Class 命名分隔符 选择器中使用连字符可以提高可读性。...按照属性首字母顺序书写 CSS 易于阅读和维护，排序时忽略带有浏览器前缀的属性。
这是一个非常简单的FTP同步工具，它可以控制上传目标的多重命名。让我们知道您的想法。 19. SASS Build SASS Build 是一个编写CSS的预处理器。...你只需按约定的 缩写形式书写而不用写整个代码，然后按“扩展”键，这些缩写就会自动扩展为对应的代码内容。...新版本显然带来了很多新的有所不同的功能，而不是简单地把所有的Linter 放在一个包中，开发者允许用户在升级时选择并安装自己经常使用的Linter。很明显，这可以节省磁盘空间。...Snippets Snippets，你一定已经听说了，可以帮你快速书写代码。但它不是像上面提到的插件那样使用缩写，它是重用代码块以节省您的时间。你甚至可以创建自己的代码段，这完全取决于你自己。 1....其他语法支持 如果有一个SublimeText本身所带语言包不包含的语言，它就无法显示适当的语法高亮。这些语言包括LESS，Sass，SCSS，Styls和Jade（或其它）。
使用分隔符这种形式可以保证命名的可读性。使用下划线作为分隔符可确保名称仍然是有效的Dart标识符， 如果语言后续支持符号导入，这将会起到非常大的帮助。...我们之所以不再使用，是因为： •SCREAMING_CAPS 很多情况下看起来比较糟糕， 尤其类似于 CSS 颜色这类的枚举值•常量常常被修改为 final 类型的非常量变量， 这种情况你还需要修改变量的名字为小写字母形式...•在枚举类型中自动定义的 values 属性为常量并且是小写字母 形式的 要把超过两个字母的首字母大写缩略词和缩写词当做一般单词来对待 首字母大写缩略词比较难阅读， 特别是多个缩略词连载一起的时候会引起歧义...考虑缩短局部变量名或者将表达式抽取为一个新的局部变量。换句话说，你应该做一些手动格式化并增加代码的可读性的修改。...dartfmt 不会把很长的字符串字面量分割为 80 个字符的列， 所以这种情况你需要自己手工确保每行不超过 80 个字符。 对于包含 URIs 的字符串则是一个例外—主要是导入和导出语句。
编码规范 指令规范 Props 规范 CSS 规范 SASS 规范 特殊规范 # 命名规范 普通变量 方法:驼峰命名 规范 跟需求的内容相关 复数的时候需要加s 常量 方法:全部大写 规范:使用大写字母和下划线来组合命名.../importModule' 如果模块默认输出一个函数，函数名的首字母应该小写 function makeStyleGuide() { } export default makeStyleGuide...name); console.log(name) // good if (true) { alert(name); } console.log(name); # CSS 规范 通用 统一使用"-"连字符...用 Sass 的上下文媒体查询 子选择器作为最后的部分 .product-teaser { // 1....对于公用组件或者全局组件库，我们应该更倾向于选用基于 class 的 BEM 策略 // bad <!
每个人在讨论模式库以及模块化设计的时候，大部分人的关注点是 CSS 选择器。无论你使用哪种模式的选择器（BEM、OOCSS、SMACSS 等等），循环可以使设计模式易读并且可维护，直接编译到代码中。...PostCSS 允许书写并分享你自己的预处理器语法。如果你愿意，你可以在 PostCSS 中重写 Sass 或者 Less，但是 已经有人在你之前这样做了。 循环条件 星际迷航并非完全虚构。...for-each 循环是 for 循环的一种形式， 它们也是 while 循环的一种形式。但是大多数的使用场景可能需要更具体的分类。...其中一个例外是生成带编号的选择器，可以是 nth-child （像我们上面做的一样），也可以是自动生成的类名（通常用在栅格系统中）。我们将创建一个简单的不带间距的响应式栅格系统。...我还想把单色列表转换成预处理器可以编译的调色板。我需要一种方法保证所有数值是相关联的并且是一种模式。我使用的方法是在单独的 Sass map 中，以键值对的形式存储主题颜色。
命名规范的示例包括：kebab-case（使用小写字母和连字符表示），camelCase（首字母小写，多个单词时，后续单词的首字母大写），以及PascalCase（所有组成名称的单词的首字母都大写）。...BEM（块、元素、修饰符）：BEM是一种流行的CSS命名约定，由俄罗斯科技公司Yandex开发，旨在提供一种模块化的CSS样式方法，提供代码可重用性，并使大规模CSS的维护成为可能。...这些通常是包裹子元素的父级/顶级元素。块使用小写字母和连字符表示。例如：.nav ， .header ， .carousel ， .card 等。...，它们以双连字符前缀（—）表示。...标准化命名和前缀：采用统一的命名约定（例如，BEM的块名称或原子CSS类）应该在整个项目中标准化，并保持一致性。
） vue create hello //注意工程名必须全部是小写 hello 选择预设模板，这里选择“Manually select features” //上下键选择 选择依赖：...TypeScript：是JavaScript的超集（.ts文件），包含并扩展了 JavaScript 的语法。需要被编译输出为 JavaScript在浏览器运行。 c....Vuex ：vuex（vue的状态管理模式） f. CSS Pre-processors ：CSS 预处理器（如：less、sass） g....Linter / Formatter：代码风格检查和格式化（如：ESlint） h. Unit Testing ：单元测试（unit tests） i....E2E Testing ：e2e（end to end） 测试 第一次创建工程时，可以只选择Babel和Router即可 选择是否使用history 形式的路由，也就是询问路径是否带 # 号，这里选择
如果你想让 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
Sass用“.sass”后缀为扩展名； SCSS用“.scss”; （2）.语法书写方式不同。 Sass以严格的缩进式语法规则来书写，不带大括号“{}”和分号“；”。 ...书写Sass的时候不带有大括号和分号，其主要的依靠严格的缩进方式来控制; 而css就是有大括号和分号，必不可少；而且缩进方式没有那么严格的要求，甚至可以不用缩进。...见：第3条第（2）点 但是注意，使用了新格式的书写方式——即用了SCSS的书写方式，但是用“.sass”的后缀名就大错特错了!...：传送带——http://www.imooc.com/code/6380 sass常见的编译错误 （1）字符编码错误 在创建Sass文件的时候，需要将文件编码设置为"utf-8"，注意他不支持"GBK"...在这种情况下，你只需要设定输出格式为压缩格式，知道输出的 CSS 代码可以直接使用即可。 9：Sass调试 如何在浏览器中直接调试Sass文件，并找到对应的行数？
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
云直播
腾讯会议
