css命名规范 | 易学教程

代码书写规范

阅读更多关于代码书写规范

前端普适性规范黄金定律不论有多少人共同参与同一项目，一定要确保每一行代码都像是同一个人编写的。永远一致同一套编码规范，可以是这里列出的，也可以是你自己总结的。如果您发现本规范中有任何错误，敬请在问题中指正。前端普适性规范项目命名项目名全部采用小写方式，以中划线分隔，禁止驼峰式命名。例如：my-project-name 文件命名文件命名参照项目命名规则。示例：error-report.html 有复数结构时，要采用复数命名法，例如：脚本，样式，图像，数据模型文件名中只规范小写英文字母az，排序数字09或间隔符-组成，禁止包含特殊符号，某些空格，$等为了醒目，某些说明文件的文件名，可以使用大写字母，例如：README，LICENSE 为更好的表达语义，文件名使用英文名词命名，或英文简写。永久命名带有广告等英文的单词，例如ad，adv，adver，advertising，防止该模块被浏览器当成垃圾广告过滤掉。任何文件的命名均如此。文件常用命名： index.shtml引导页＆首页 main.shtml主页 download.shtml下载页面 act.html活动列表页面 video.html视频 cdkey.html CDKEY页面 base.css基本样式 layout.css框架布局 module.css模块样式 global.css局部样式 font

css命名和书写规范

阅读更多关于 css命名和书写规范

前言在项目开发中对于css名字的命名和书写老是感觉很混乱，这对于代码的可读性以及维护提出了挑战，所以在闲暇之余看了一些这方面的内容，现总结如下... 1.命名规则说明所有的命名最好都小写属性的值一定要用双引号("")括起来，且一定要有值如class="divcss5",id="divcss5" 每个标签都要有开始和结束，且要有正确的层次，排版有规律工整空元素要有结束的tag或于开始的tag后加上"/" 表现与结构完全分离，代码中不涉及任何的表现元素，如style、font、bgColor、border等给每一个表格和表单加上一个唯一的、结构标记id 给图片加上alt标签尽量不缩写，除非一看就明白的单词，不知道的用翻译软件翻译一下无论是使用“.”（小写句号）选择符号开头命名，还是使用“#”(井号)选择符号开头命名都无所谓，但我们最好遵循，主要的、重要的、特殊的、最外层的盒子用“#”(井号)选择符号开头命名，其它都用“.”（小写句号）选择符号开头命名如果名字过长可以用中横线但是拒绝使用下划线（IE6以可能出现解析错误，为了区分JavaScript变量名） bad .miantitle { color: #e3c; } .mian_title { color: #e3c; } good .mian-title { color: #e3c; } 11

快速理解web语义化

阅读更多关于快速理解web语义化

什么是Web语义化 Web语义化是指使用恰当语义的html标签、class类名等内容，让页面具有良好的结构与含义，从而让人和机器都能快速理解网页内容。语义化的web页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息，从而可以读懂网页的内容，然后将收集汇总的信息进行分析，结果为人类所用；另一方面它可以让开发人员读懂结构和用户以及屏幕阅读器（如果访客有视障）能够读懂内容。简单来说就是利于 SEO，便于阅读维护理解。总结起来就是：正确的标签做正确的事情页面内容结构化无CSS样子时也容易阅读，便于阅读维护和理解便于浏览器、搜索引擎解析。利于爬虫标记、利于SEO html 语义化标签 HTML为网页文档内容提供上下文结构和含义。对于HTML体系而言，Web语义化是指使用语义恰当的标签，使页面有良好的结构，让页面元素有含义，便于被浏览器、搜索引擎解析、利于SEO。通常我们所说的HTML应该是完全脱离表现信息的，其中的标签应该都是语义化地定义了文档的结构。代码示例： <html> <body> <article> <header> <h1>h1 - WEB 语义化</h1> </header> <nav> <ul> <li>nav1 - HTML语义化</li> <li>nav2 - CSS语义化</li> </ul> </nav> <section>

css样式表的先后顺序

阅读更多关于 css样式表的先后顺序

CSS书写顺序位置属性(position, top, right, z-index, display, float等) 大小(width, height, padding, margin) 文字系列(font, line-height, letter-spacing, color- text-align等) 背景(background, border等) 其他(animation, transition等) 使用CSS缩写属性　　CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。去掉小数点前的“0” 连字符CSS选择器命名规范　　1.长名称或词组可以使用中横线来为选择器命名。　　2.不建议使用“_”下划线来命名CSS选择器，为什么呢？　　输入的时候少按一个shift键；　　浏览器兼容问题（比如使用_tips的选择器命名，在IE6是无效的）　　能良好区分JavaScript变量命名（JS变量命名是用“_”）来源： oschina 链接： https://my.oschina.net/u/261347/blog/639283

精简高效的CSS命名准则/方法

阅读更多关于精简高效的CSS命名准则/方法

一、“无”的哲学佛家讲究“因果报应”，有果必有应。此段看似与主题没有血缘关系，实际讲的是“因”。我个人比较喜欢老子的道家思想，并喜欢以其思想解释学习与工作中遇到的一些问题。例如我之前写过的“ 中国古代道家思想与网页重构的思考 ”一文。老子有云：“天下万物生于有，有生于无”。具体解释就是：天下万物都是由看得见的具体事物（“有”）产生的，而看得见的具体事物（“有”）又是由看不见的，无形无状的东西（“无”）产生的，这个看不见的“无”也就是“道”，或叫做“根”、“母”。我们看武侠片，经常听到“无招胜有招”这句话，这也是道家“无”之思想之体现。因为你心中没有招式，你才能有无限的可能，生成其他的招式以克敌，即所谓以不变应万变；相反，如果你心中牢记一套“华山剑法”，当你与人交手时，势必按照此套路走，要是遇到相克之剑法，结局就是一败涂地。“无招”是一种境界，是你功夫修炼到一定程度才能领悟到的。我们这代人应该都看过李连杰主演的《倚天屠龙记魔教教主》，其中张三丰老头教完张无忌太极拳后问他“记住了没？”张无忌一句“全忘记了！”让人印象深刻。这就是“无”的境界。这种境界我是深有体会的。例如每逢大考之前，我总是把以前做过的题目全部忘掉，这样，考试时就能思如泉涌；反而是强记题目的做法限制了发挥。这就好比发射炮弹，炮管里提前预装了重型炸蛋，结果战斗开始时，发现需要的是烟雾弹，此时

CSS — BEM 命名规范

阅读更多关于 CSS — BEM 命名规范

推荐阅读： https://juejin.im/post/5b925e616fb9a05cdd2ce70d 1 什么是 BEM 命名规范 Bem 是块（block）、元素（element）、修饰符（modifier）的简写，由 Yandex 团队提出的一种前端 CSS 命名方法论。 - 中划线：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。 __ 双下划线：双下划线用来连接块和块的子元素 -- 双中划线：双中划线用来描述一个块或者块的子元素的一种状态 BEM 是一个简单又非常有用的命名约定。让你的前端代码更容易阅读和理解，更容易协作，更容易控制，更加健壮和明确，而且更加严密。 1.1 BEM 命名模式 BEM 命名约定的模式是： .block {} .block__element {} .block--modifier {} 每一个块(block)名应该有一个命名空间（前缀） block 代表了更高级别的抽象或组件。 block__element 代表 .block 的后代，用于形成一个完整的 .block 的整体。 block--modifier 代表 .block 的不同状态或不同版本。使用两个连字符和下划线而不是一个，是为了让你自己的块可以用单个连字符来界定。来源： https://www.cnblogs.com/amiezhang/p

Web前端工程师需要注意的开发规范有哪些？

阅读更多关于 Web前端工程师需要注意的开发规范有哪些？

从事web前端开发工作我们就需要了解web前端开发的规范，这样才能保证高效快速的完成工作，本篇就和大家分享一下web前端开发工程师需要注意的 web前端开发规范有哪些，希望对小伙伴们有所帮助。 web前端开发工程师需要注意的web前端开发规范有哪些？一、CSS书写规范 1. 编码统一为utf-8; 2. 协作开发及分工: i会根据各个模块, 同时根据页面相似程序, 事先写好大体框架文件, 分配给前端人员实现内部结构&表现&行为; 共用css文件base.css由i书写, 协作开发过程中, 每个页面请务必都要引入, 此文件包含reset及头部底部样式, 此文件不可随意修改; 3. class与id的使用: id是唯一的并是父级的, class是可以重复的并是子级的, 所以id仅使用在大的模块上, class可用在重复使用率高及子级中; id原则上都是由我分发框架文件时命名的, 为JavaScript预留钩子的除外; 4. 为JavaScript预留钩子的命名, 请以 js_ 起始, 比如: js_hide, js_show; 5. class与id命名: 大的框架命名比如header/footer/wrapper/left/right之类的在2中由i统一命名，其他样式名称由小写英文 & 数字 & _ 来组合命名, 如i_comment, fontred, width200;

三种基本的选择器和命名规范

阅读更多关于三种基本的选择器和命名规范

三种基本的选择器 : class选择器 class=‘box’ .表示class选择器 .box{ css 样式 },支持多个命名(名字) id选择器 : id=“name1” #表示id选择器 #name1{css样式} 就像身份证号一样,只能有一个,具有唯一性,名字只能出现一次标签选择器 :标签名{css样式},选择范围广(如果选择p标签,就选择页面中所有的p标签) 通配符 : 表示 * 缺点:浪费性能 * { padding : 0 ; margin : 0 ; font - size : 20px ; } 单个权重问题: id 选择器>class选择器>标签选择器>通配符选择器组合选择器 : ( 子代选择器)层级选择器(后代选择器 ) :―比如:选择器A 选择器 B(css样式) 在满足选择器A 的标签内找到满足选择器B条件的这些标签设置样式子元素选择器 (只能是儿子):子元素选择器符号 > 如:ul > li 选择ul的子元素,而不是后代元素(只选择儿子)―缩小选择范围 ,避免样式污染兄弟选择器 : ~ 如: div ~ p {css样式} 选择div下面所有的兄弟p 毗邻选择器 (邻居选择器): + 只能选择下面的邻居或者兄弟如div+p 选择div下边相邻的一个p标签属性选择器 :选择器名[属性名=“属性值”]{ css样式 } img [ src =

HTML命名规范

阅读更多关于 HTML命名规范

一、关于选择器的命名 W3C CSS2.1的 4.1.3 节中提到：标识符（包括选择器中的元素名，类和ID）只能包含字符[a- zA-Z0-9]和ISO 10646字符编码U+00A1及以上，再加连字号（-）和下划线（_）；它们不能以数字，或一个连字号后跟数字为开头。它们还可以包含转义字符加任何ISO 10646字符作为一个数字编码。注：由于设计到的字符很多，本文只针对字符[a-zA-Z0-9]，再加连字号（-）和下划线（_）进行讨论。关于CSS中允许使用的字符和大小写信息，请参考W3C CSS2.1的4.1.3节二、差异及可能产生的问题在W3C CSS2.1说明文档中，只提到选择器标识符不能以数字，或一个连字号后跟数字为开头。除此之外，没有相关的说明。那么各浏览器下的表现是否遵循这一规则呢？三、如何避免受此问题影响坚持以字母开头命名选择器，这样可保证在所有浏览器下都能兼容。四、关于团队合作的css命名规范常用的css命名规则头：header 内容：content/container 尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper 左右中：left right center 登录条：loginbar 标志：logo 广告：banner 页面主体：main 热点：hot 新闻：news 下载

遵循规则

阅读更多关于遵循规则

项目集成 vue vuex axios less scss stylus element mint ant - design - vue 项目规范最小化组件单一职责多使用函数式编程方式map filter reduce some any forEach every find findIndex 页面文件呢不超过300行，超过考虑拆分组件命名规范 css使用BEM命名规范 css使用BEM命名规范组件大驼峰式命名文件和文件夹驼峰式命名 webApp 使用rem 用hotcss 页面性能优化提高首屏加载速度 -题高首页加载速度可以从页面的体积，组赛脚本，http请求数去控制 -第一就是压缩js css img -第二就就是script图片组件按需加载代码层做好分区善用cdn，后端开启gzip，开启缓存，可以使用pwa优化页面缓存 web worker做并行计算来源： CSDN 作者： weixin_41379961 链接： https://blog.csdn.net/weixin_41379961/article/details/91354390

订阅 css命名规范