BEM样式使用规范】的更多相关文章

BEM 是 Block(块) Element(元素) Modifier(修饰器)的简称 使用BEM规范来命名CSS,组织HTML中选择器的结构,利于CSS代码的维护,使得代码结构更清晰(弊端主要是名字会稍长) 官方地址 点击查看 在选择器中,由以下三种符号来表示扩展的关系: -中划线 :仅作为连字符使用,表示某个块或者某个子元素的多单词之间的连接记号 type-block__element--modifier __ 双下划线:双下划线用来连接块和块的子元素 block__element -- 双…
可能不同团队都有各自的规范,又或者很多人在写 CSS 的时候还是想到什么就写什么,不存在太多的约束. 我觉得 CSS 代码规范还是有存在的必要的,尤其是在团队配合,多人协作下,规范就显得尤为重要. 本文的所列是实践当中得出的一套比较不错的 CSS 书写规范,并不希望大家完全采用,而是可以结合自己的团队需要,发展出一套适合自己的 CSS 代码规范. 也希望可以有更多的建议,共同的完善.本规范也可以在我的 Github 上看到,欢迎留言或者提 PR. 编码设置 采用 UTF-8 编码,在 CSS 代…
一.基本约定 1.源文件 (1).纯PHP代码源文件只使用 <?php 标签,省略关闭标签 ?> : (2).源文件中PHP代码的编码格式必须是无BOM的UTF-8格式: (3).使用 Unix LF(换行符)作为行结束符: (4).一个源文件只做一种类型的声明,即,这个文件专门用来声明Class, 那个文件专门用来设置配置信息,别混在一起写: 2.缩进 使用Tab键来缩进,每个Tab键长度设置为4个空格: 3.行 一行推荐的是最多写120个字符,多于这个字符就应该换行了,一般的编辑器是可以设…
虽然我只是刚踏入web前端开发圈子.在一次次任务里头,我发觉每一次的css命名都有所不同和不知所措.脑海就诞生了一个想法--模仿大神的css命名样式. 毕竟日后工作上,是需要多个成员共同协作的.如果没有良好的命名,就会造成许多没必要的耽误和麻烦. 命名空间的规范: 布局:以 g 为命名空间,例如:.g-wrap ..g-header..g-content.状态:以 s 为命名空间,表示动态的.具有交互性质的状态,例如:.s-current.s-selected.工具:以 u 为命名空间,表示不耦…
在工作当中css样式是非常重要的,但是咋样书写css样式更重要. 一.css书写规范 1.定位属性:position  display  float  left  top  right  bottom   overflow  clear   z-index 2.自身属性:width  height  padding  border  margin   background 3.文字样式:font-family   font-size   font-style   font-weight   fo…
css----页面样式,美化页面 css样式的三个规则 1内联式:直接写在html标签中 <p style="color:red"> 直接对html标签使用 style属性 语法:style=“样式:值 样式:值” 优点:操控精准 缺点:不灵活,代码 2嵌入式:在<style>标签内给标签css样式 在head标签内 <style type=text/css> 优点:代码精简 缺点:控制不灵活 3外部式:建立单独的 .css文件 使用<link…
CSS网站框架 复位:reset.css 基础:base.css 或 basic.css (字体大小.颜色.背景.行高.列表样式.按钮样式.表格样式等等) 布局:layout.css (非结构的布局) 主题:themes.css 表单:forms.css //模块类 头部:header.css 尾部:footer.css 或 copyright.css 针对网站的每个栏目单独写一个以栏目名称命名:xxx.css (首页.列表.内容等等) class id 组合命名 中横线“-”来连接前后单词作为…
一直以来自己对命名都是比较混乱的,并没有一个比较好的格式来命名,最近自己碰巧学习到了BEM命名规范,我想谈谈自己的理解以供自己来学习,同时也可以和各位大佬一起学习. BEM是一个很有用的方法可以创建复用组件和前端代码 有三个特性. 易用性,使用BEM只需要使用BEM的命名规范就可以. 单元性,使用独立的块和CSS选择器,可以使你的代码可重用和单元化. 灵活性,使用BEM后,方法和工具可以按照自己喜欢的方式去组织和配置. BEM的简介 BEM是一个强大而简单的命名规范,使得代码更容易让人理解,容易…
css规范之BEM规范 前言 引用一句经典名言在编程的世界里其中一件最难的事情就是命名,不管是设计到编程语言还是标记语言都会有命名的需求.今天聊的就是关于css的命名规范的发展过程以及演变. 命名的发展变化过程 非组件化项目css命名原则 复用性 全局性 以jquery为代表的时代,我们项目都是独立的html文件,此时为了让我们的项目更好的维护,在写样式的时候,通常我们会将一些通用的样式单独提取到一个css文件,每个页面使用的时候可以引入使用,比如reset.css,common.css. 每一…
一般团队都有对CSS样式的规范,因为只有写的规范些,维护层本低,易懂.我们开发并不一次性的,往往都是要迭代的,如果这次随便写,下次迭代的时候将付出高昂的代价.而团队的规范一般都大同小异,往往都包含一下内容: 1.class命名及使用 (1).命名尽量简洁有意义,比如大盒子一般命名为‘container’,而这种就命名为‘steps’,然后类名个人喜欢用‘-’,而不是驼峰或者下划线比如:app-main (2).使用:类名一般都是用来写样式的,js操作dom多用ID选择器 2.少用id选择器, 因…