当我们使用 SAP SmartEdit 打开 SAP Commerce Cloud Storefront 时，在商户网站中，还必须在body标签中作为CSS类名包含以下唯一标识符： smartedit-page-uid...-：指定指定目录和目录版本的唯一页面标识符。...通常情况下，它是页面的复合主键的序列化表示（在默认的CMS实现中，复合主键包含目录版本信息）。 smartedit-catalog-version-uuid-：指定目录版本的UUID。...通常情况下，它是目录版本的复合主键的序列化表示。...下面是 body 标签里 css class 的一个例子： <body class="smartedit-page-uid-mypageuid smartedit-page-uuid-mypageuuid
命名混乱 - 因为怕全局污染，所以日常起class名称时会尽量加长，这样不容易重复，但当项目由多人维护时，很容易导致命名风格不统一。...但是对于命名混乱问题的效果不大。...BEM (.block__element--modifier) - 比较流行的class命名规则，部分解决了命名混乱和全局污染的问题，但class定义起来还是不太方便，比较冗长，而且和第三方库的命名还是有可能冲突...可以看一个简单的CSS Modules例子了解一下： 生成的dom结构如下图，基于css文件中的class名称生成了唯一的class名称，样式会定义到生成的class上。...优劣势总结 看了这些框架后，可以发现CSS-in-JS的优势还是挺多的： 因为有了生成的唯一class名称，避免了全局污染的问题 唯一的class名称也解决了命名规则混乱的问题 JavaScript和CSS
# 模块化 CSS 的作用 随着 React 项目日益复杂化、繁重化，React 中 css 面临很多问题，比如样式类名全局污染、命名混乱、样式覆盖等。这时， css 模块化就显得格外重要。...important 或者 行内样式 来解决 Web Components 标准中的 Shadow DOM 能彻底解决这个问题，但它的做法有点极端，样式彻底局部化，造成外部无法重写样式，损失了灵活性 解决命名混乱...，有很多相似的样式代码，如果没有用到 css 模块化，构建打包上线的时候全部打包在一起，那么无疑会增加项目的体积 React 使用 css 模块化的思路： css module ，依赖于 webpack...js 模块一样加载 css ，本质上通过一定自定义的命名规则生成唯一性的 css 类名，从根本上解决 css 全局污染，样式覆盖的问题。...Modules 的类名都有自己的私有域的，可以避免类名重复/覆盖，全局污染问题 引入 css 更加灵活，css 模块之间可以互相组合 class 类名生成规则配置灵活，方便压缩 class 名 注意事项
2、目前我司在编写CSS样式时存在编写混乱、多页面的样式写在同一CSS文件、不方便阅读等几乎毫无原则的现象，产生诸多弊端，罗列如下： 1）多个页面的样式写在同一个CSS文件中： 加载一个页面同时把其他页面的...4、每一个页面都应用一个独立的CSS文件，常用页面应该做成CSS文件模板 每一个页面都应用一个独立的CSS文件，而不能出现多个页面的样式放到同一个CSS文件中，这样会延长加载时间，也会使得命名更加困难。...10、用于编写js选择用的class名称应与一般的样式class名称有所区别 例如一般的样式类名：.content-wrapper；而用于js选择用的类名：.content_wrapper_hook。...输入的时候少按一个shift键； 浏览器兼容问题 （比如使用_tips的选择器命名，在IE6 是无效的） 能良好区分JavaScript变量命名（JS变量命名是用“_”） ③用字母、_号、-号、数字组成...，必须以字母开头，不能为纯数字。
：回复框，.replyBox{…}，禁止用拼音缩写命名，如.hfk{…}。...7、清除浮动时用.clearfix，禁止用无语义的 清除。...—— 不要使用eval() 只用于解析序列化串 (如: 解析 RPC 响应) eval() 会让程序执行的比较混乱, 当 eval() 里面包含用户输入的话就更加危险....所有文件（.html、.css、.js、图片）命名，如需要两个单词表示的，使用””下划线连接符（如：indexinfo.html）。...所有素材图片应将文件名第一个单词命名为图片分类，第二个单词为图片名称，第三个单词可以是数字或其它内容，以下为图片命名细则： icon_xxx.gif //图标文件名 btn_xxx.gif
CSS Modules CSS 模块化 不管是用jquery还是react开发，都会遇到的一系列 CSS 的问题： 全局污染 命名混乱 依赖引入复杂 无法共享变量 代码冗余 通过 JS 来管理 CSS..., } CSS Modules 对 CSS 中的 class 名都做了处理，使用对象来保存原 class 和定制处理后的 class 的对应关系。...Modules时定义的规则localIdentName=[name]__[local]-[hash:base64:5]会控制对class名的处理， [hash:base64:5]定义的hash计算能保证类名的唯一性...当类名经过编译生成新的随机类名后，可以解决命名冲突，但因为无法预知最终 class 名，不能通过一般选择器覆盖。...现在一般给出的项目中的实践是可以给组件关键节点加上 data-role 属性，然后通过属性选择器来覆盖样式。 前端项目不可避免会引入 normalize.css 或其它一类全局 css 文件。
针对以往我写网页样式的经验，具体来说可以归纳为以下几点： 全局样式冲突 过程是这样的：你现在有两个模块，分别为A、B,你可能会单独针对这两个模块编写自己的样式，例如a.css、b.css，看一下代码 /...增加了不必要的字节开销 语义混乱，当文档中出现过多的content、title以及item这些通用的类名时，你可能要花上老半天才知道它们到底是用在哪个元素上 可扩展性不好，约束越多，扩展性越差 【注】CSS...的渲染规则可以参看这篇文章探究 CSS 解析原理 会带来代码的冗余 由于CSS不能使用类似于js的模块化的功能，可能你在一个css文件中写了一个公共的样式类，而你在另外一个css也需要这样一个样式，这时候...CSS预处理器最大的好处就是可以支持模块引入，用js的方式来编写CSS，解决了部分scope混乱以及代码冗余的问题，但是也不能完全避免。...BEM解决了模块复用、全局命名冲突等问题，配合预处理CSS使用时，也能得到一定程度的扩展，但是它依然有它的问题： 对于嵌套过深的层次在命名上会给需要语义化体现的元素造成很大的困难 对于多人协作上，需要统一命名规范
（1）HTML代码的基本规范 1. HTML的命名和格式 任何代码的混乱都是从命名和格式的混乱开始的，所以一定要有统一和规范的命名和格式，以下是一些基本的规范。...给所有的关键元素定义元素的id和class，便于和CSS，JavaScript的交互；id名称中的关键词用下划线（_）连接，class的关键词用中划线（-）连接，根据实际的意义和Dom树的层级关系定义合适的名称... 2 CSS代码和HTML代码分离 样式可以直接写在标签的style属性里面，也可以写在页面...CSS文件在前，JavaScript文件在后，JavaScript代码放到页面底部 JavaScript文件的下载和解析会阻塞页面的加载，所以在head部分，CSS的引用写在前面，而JavaScript...谨慎使用iframe iframe有两个缺点：1，iframe会阻塞主页面的Onload事件；2，iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
，如：回复框，.replyBox{…}，禁止用拼音缩写命名，如.hfk{…}。...6、清除浮动时用.clearfix，禁止用无语义的清除。...return false; } // 推荐 function() { return false; } —— 不要使用eval() 只用于解析序列化串 (如: 解析 RPC 响应) eval() 会让程序执行的比较混乱...2、所有文件（.html、.css、.js、图片）命名，如需要两个单词表示的，使用"_"下划线连接符（如：index_info.html）。...3、所有素材图片应将文件名第一个单词命名为图片分类，第二个单词为图片名称，第三个单词可以是数字或其它内容，以下为图片命名细则： icon_xxx.gif //图标文件名 btn_xxx.gif
.replyBox{…}，禁止用拼音缩写命名，如.hfk{…}。...6、清除浮动时用.clearfix，禁止用无语义的清除。...function() { return false; }// 推荐function() { return false;}复制—— 不要使用eval()只用于解析序列化串 (如: 解析 RPC 响应)eval() 会让程序执行的比较混乱...2、所有文件（.html、.css、.js、图片）命名，如需要两个单词表示的，使用"_"下划线连接符（如：index_info.html）。...3、所有素材图片应将文件名第一个单词命名为图片分类，第二个单词为图片名称，第三个单词可以是数字或其它内容，以下为图片命名细则：icon_xxx.gif //图标文件名btn_xxx.gif /
本期精读的文章是：css-in-js 杀鸡用牛刀 1 引言 继 精读《请停止 css-in-js 的行为》 这篇文章之后，我们又读了一篇抵制 css-in-js 的文章，虽然大部分观点都有道理，但部分存在可商榷之处...，让我们分析一下这篇文章，了解 css 还做了哪些努力，以及 css-in-js 会如何发展。...这样的好处在于避免了 class 之间的冗余，让我们更容易创建可复用的 class，也不会在命名上纠结。...，即便产生了样式冲突、混乱的问题，但我们仍要记住，在模块化开发的今天，仍要保持网站风格的整体性，即便使用了 css-in-js 的开发方式。...是个不错的选择 :p 讨论地址是：精读《css-in-js 杀鸡用牛刀》 · Issue #38 · dt-fe/weekly
> 用海量的实用工具类（utility classes）组成的样式表，让我们可以在网页里大显身手。...一个专案或计划至少失去若干关键成员的参与（“被巴士撞了”，指代职业和生活方式变动、婚育、意外伤亡等任意导致缺席的缘由）即导致专案陷入混乱、瘫痪而无法存续时，这些成员的数量即为巴士系数。...Facebook 分享了具体数字: 旧的网站仅仅首页就用了 413Kb 的 CSS 新的网站整个站点只用了 74Kb，包括暗黑模式 源码和输出 这两个库的 API 看起来很相似，但也很难说，因为我们对...; } 可以看出，虽然标签上的类名变多了，但是 CSS 的输出体积会随着功能的增多而减缓增长，因为出现过一次的 CSS Rule 就不会再重复出现了。...甚至可以用 TS 来避免错别字。 结论 这就是我要说的关于原子 CSS-in-JS 所有内容。 我从来没有在任何大型生产部署中使用过原子 CSS、原子 CSS-in-JS 或 Tailwind。
class class name 禁止在非特殊情况下写 ！important CSS本身有权重设计，任意地使用 !important 会造成权重混乱而无法维护。...不可轻易限定宽高 用户可以自行设定自己的浏览器，例如 Android 手机可以设定显示字体大小，写死的高度会让字体相互重叠。 RWD失效 移动设备的高度是无限的，宽度是有限的。 请不要把宽写死。...不可直接 over write 或在原本框架的 class 增加内容 class class 设计RWD网站，请遵循移动设备优先原则 HTML/CSS 手机开启网页很吃手机效能和网络状况，前端工程师一开始就以手机版为优先...定位，例如 position: absolute; 不要随意 none 掉画面上的 tag 或行为 none reset.css class reset.css 常见的 a tag 不要有 underline...list 消除原有样式 请在 reset.css 上定义，并且设为第一载入次序 有JavaScript行为的 class 可以为命名加入 name space #js-project-show {}
命名混乱 由于全局污染的问题，多人协同开发时为了避免样式冲突，选择器越来越复杂，容易形成不同的命名风格，很难统一。样式变多后，命名将更加混乱。...; /* ... */ } 但直接使用这两个关键字编程太麻烦，实际项目中很少会直接使用它们，我们需要的是用 JS 来管理 CSS 的能力。...通过这些简单的处理，CSS Modules 实现了以下几点： 所有样式都是 local 的，解决了命名冲突和全局污染问题 class 名生成规则配置灵活，可以此来压缩 class 名 只需引用组件的 JS...class 命名技巧 CSS Modules 的命名规范是从 BEM 扩展而来。...外部如何覆盖局部样式 当生成混淆的 class 名后，可以解决命名冲突，但因为无法预知最终 class 名，不能通过一般选择器覆盖。
不要以数字开头一个 ID 名称 ID 名称应该是一个页面内唯一的 如果想要对页面中的单个元素使用样式时，可以使用 ID 选择器 类选择器 类似地，每个 HTML 标签都有一个class属性...，这种在 HTML 标签中内嵌 CSS 也导致了内容呈现的混乱，不利于 CSS 的引进。...样式表的优先级 不难想象，一个 HTML 元素具有内联、内部和外部样式这三种样式的情形。在这种情况下，其风格应该是混乱的。...CSS属性 在前面的例子中，我们已经使用了“color”和“ text-align" 属性。它们只是众多 CSS 属性中的2个。CSS 属性的名称是相当直观的，也就是说，它们会起到它们名称的作用。...以下是常见的几种 font-family 属性的风格名称。字体列表用逗号分隔。
> 复制代码 用海量的实用工具类（utility classes）组成的样式表，让我们可以在网页里大显身手。...一个专案或计划至少失去若干关键成员的参与（“被巴士撞了”，指代职业和生活方式变动、婚育、意外伤亡等任意导致缺席的缘由）即导致专案陷入混乱、瘫痪而无法存续时，这些成员的数量即为巴士系数。...Facebook 分享了具体数字: 旧的网站仅仅首页就用了 413Kb 的 CSS 新的网站整个站点只用了 74Kb，包括暗黑模式 ?...以这张图为例，我们期望的是书写在后的 blue 类覆盖前面的类，但实际上 CSS 会以样式表中的顺序来决定优先级，最后我们看到的是红色的文字。...甚至可以用 TS 来避免错别字。 结论 这就是我要说的关于原子 CSS-in-JS 所有内容。 我从来没有在任何大型生产部署中使用过原子 CSS、原子 CSS-in-JS 或 Tailwind。
CSS Modules是一套开源的规范，用以解决CSS的以下问题： 命名冲突 没有模块化 依赖关系不明（样式覆盖问题） 该规范需要打包工具实现。...我们用一个例子来简要了解他的实现细节： 将CSS文件style.css引入为style对象后，通过style.title的方式使用title class： import style from '....首选，通过对比可以发现： 该标准命名与现有开源方案冲突 标准的语法与现有开源方案语法相同 第一点，假设在未来一个初学者搜索CSS Modules，那么结果可能会让他困惑，我搜到的是谁？...如果未来需要实现Native CSS Modules的polyfill，轻则造成重复工作、重则遇到两种方案更迭造成的混乱（想想社区从CJS过渡到ES Modules遇到多少问题）。...并且，由于Native CSS Modules需要在所属JS模块加载后再异步加载，可能会产生很多碎片化的CSS文件请求。
Peergrade.io处理CSS的方式 规则1: 使用前缀 (class类名) 在Peergrade.io中我们在所有样式名中使用前缀 .pg。 在你的CSS代码中如果不使用前缀可能会带来些麻烦。...在很长一段时间内字体是不会在类名中用前缀的， 那意味着你经常会遇到.icon-*之类为前缀的命名冲突（现在他们用 .fa前缀）。...当你写它的时候，你也许会想这里仅有一个.profile-description的列表命名，但一两个月后， 你必须要增改另一个列表时，混乱的结构已经超出你能想到的范围。...规则3: 构建组件时用边界元法（BEM）命名 尽可能试着用BEM命名去创建独立的组件，我们不必完全按照BEM的规范 - 只是用命名组合，这意味着类名以如下的方式命名： .block__element--...（事后我们碰到类似的CSS时，自然会提及到Harry的这个命名体系） 向前看 看来没有人真正找到CSS最好的解决方案， 并且当看到Hacker News最新文章 -- 那些差点要变成（替代）CSS的语言
写了这么一些时间的CSS，有时候觉得有些混乱，尤其是做样式修改的时候。后来觉得遵循一些书写规范和顺序来的话，一来会让自己的思路很清晰，二来修改的时候很明确，不容易被冗余的样式影响。...定位属性的修改会导致reflow，改变文字颜色、背景等会使得浏览器repaint，都会影响浏览器渲染性能。...简写命名 简写命名也要让别人能读懂 连字符CSS选择器命名规范 输入的时候少按一个shift键； 浏览器兼容问题 （比如使用_tips的选择器命名，在IE6是无效的); 能良好区分...JavaScript变量命名（JS变量命名是用“_”）....css命名规范 常用的CSS命名规则 头：header 内容：content/container 尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体佈局宽度
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
