css命名规则

最新推荐文章于 2024-01-12 11:06:42 发布
最新推荐文章于 2024-01-12 11:06:42 发布
阅读量237 收藏
点赞数
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Vivian_shuang/article/details/51848213
版权

（1）、CSS文件命名规范


全局样式：global.css


框架布局：layout.css


字体样式：font.css


链接样式：link.css


打印样式：print.css


主要的：master.css


专栏：columns.css


主题：themes.css


（2）、CSS样式命名规范


容器：container/box


头部：header


主导航：mainNav


子导航：subNav


顶导航：topNav


边导航：sidebar


左导航：leftsideBar


右导航: rightsideBar


网站标志：logo


大广告：banner


页面中部：mainBody


整个页面：content


底部：footer


菜单：menu


菜单内容：menuContent


子菜单：subMenu


子菜单内容：subMenuContent


搜索：search


搜索关键字：keyword


搜索范围：range


标签文字：tagTitle


标签内容：tagContent


当前标签：tagCurrent/currentTag


标题：title


内容：content


列表：list


当前位置：currentPath


侧边栏：sidebar


图标：icon


注释：note


登录：login


注册：register

Vivian_shuang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS 命名规范
skysys的研究小屋
09-02 2090
CSS命名由小写的英文单词或组合命名，单词与单词之间通过“-”连接，常用的CSS命名规范有文本命名规范，页面结构命名规范，导航命名以及功能命名等。 CSS 命名一般采用小写英文单词或组合命名，单词与单词之间以"-"分割，而且英文单词不缩写，除非是那种简单一眼看上去就能明白的单词。 文本命名规范 index.css： 一般用于首页建立样式 head.css： 头部样式，当多个页面头部设计风格相同时使用。 base.css： 共用样式。 style.css：独立页面所使用的样式文件。 global.css：页
值得收藏的CSS命名规范(规则)常用的CSS命名规则
12-14
CSS命名规范(规则)常用的CSS命名规则  头：header  内容：content/container  尾：footer  导航：nav  侧栏：sidebar  栏目：column  页面外围控制整体佈局宽度：wrapper  左右中：left right center  登录...
css命名规范
qq_27104997的博客
04-28 3158
BEM 命名规范 什么是 BEM 命名规范 Bem 是块(block)、元素(element)、修饰符(modifier)的简写，由 Yandex 团队提出的一种前端 CSS 命名方法论。 - 中划线 ：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。 -- 双中线 代表不同的状态，类型。 __ 双下划线: 双下划线用来连接块和块的子元素 _单下划线：单下划线用来描述一个块或者块的子元素的一种状态 BEM 是一个简单又非常有用的命名约定。让你的前端代码更容易阅读和...
史上最全CSS命名规范
qq_39155611的博客
04-21 6014
CSS样式命名 说明 命名规则说明： 所有的命名最好都小写,不可以用纯数字命名，不可以用数字或“_”开头命名 属性的值一定要用双引号("")括起来，且一定要有值如class=“box”,id=“box” 每个标签都要有开始和结束，且要有正确的层次，排版有规律工整 空元素要有结束的tag或于开始的tag后加上"/" 表现与结构完全分离，代码中不涉及任何的表现元素，如style、font、bgCol...
常用的css命名规则
weixin_45904557的博客
06-15 5101
头：header top 内容：content/container / main 尾：footer bottom 导航：nav navigation navlist subnav 侧栏：sidebar 栏目：column cols 页面外围控制整体布局宽度：wrapper 左右中：left right center navleft headerleft 登录条：loginbar login 标志：logo 广告：banner 页面主体：ma.........
CSS命名规范
qq_41988669的博客
06-11 607
css 命名
常用的CSS命名规范
Jenn168的博客
06-16 482
 &CSS命名由小写的英文单词或组合命名，单词与单词之间通过“-”连接，常用的CSS命名规范有文本命名规范，页面结构命名规范，导航命名以及功能命名等。 1.页面结构   页头：header    页面主体：main   内容：content / container    页尾：footer    容器：container   导航：nav    侧栏：sidebar    栏目：column    页面外围控制整体布局宽度：wrapper 
css BEM 命名规范
weixin_50982549的博客
07-11 484
1.什么是BEM命名规范 BEM是块（block），元素（element），修饰符（modifier）的简写， - 中划线： 仅为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号 __ 双下划线：双下划线用来连接块和块的子元素 _ 单下划线 ： 单下划线用来描述一个块或者块的子元素的一种状态 BEM是一个简单又非常有用的命名约定，当你的前端代码更容易阅读和理解，更容易协作，更容易控制，更加健壮和明确，而且更加严密。 1.1 BEM命名模式 BEM命名约定的模式是： .blo.
CSS命名规范--BEM
m0_58185754的博客
05-16 666
在阅读element时，发现其CSS命名采用BEM的风格，于是去查阅BEM是什么... 我的理解：BEM是命名规范 BEM的意思就是块（block）、元素（element）、修饰符（modifier） 主要问题是CSS类名中“--”和“__”是什么意思？ __（两个短横线）表示某一个块的后代元素 --表示某一个块的不同状态或版本 .block{} block块 .block__element{} block块下的元素 .block--modifier{} blo...
前端开发中需要注意的CSS命名规则以及书写顺序
最新发布
清颖的博客
01-12 2612
CSS命名一般是用 BEM 规则命名的。它背后的想法是将用户界面划分为独立的块。 `BEM`的意思就是`B模块(block)`、`E元素(element)`、`M修饰符(modifier)`， 即：`[block]__[element]--[modifier]`。关于CSS属性的书写顺序建议： 一般来说，要先定义好布局，即先写位置、再写大小边距，再写文字样式、背景色，最后写其他属性。
CSS命名规则整理
胖太乙
12-14 4360
前言 在开发的道路上已经走了5年了， 作为一个后端开发，之前的工作中心一直都是在后端上。前端技术属于那种"半吊子"，什么都会， 什么都不精。 上个月接手一个前端的系统， 整个界面编写完成之后，发现自己的前端命名有很大的问题， 没有什么规律， 都是临时起意命名的，有些模块差不多的功能， 命名确是大不相同。于是， 今天抽出一点时间， 来整理一下自己这个前端命名的规范。（以下内容有部分是从百度查询的， 一部分是问前端开发的朋友的。也许每个人的规范不一样， 但是总体来说都是差不多的。） ID id，我通常用驼峰式命
css 命名规范
10-31
css 命名规范
盒子嵌套
Vivian_shuang的博客
07-06 3052
DOCTYPE html> html lang="en"> head> meta charset="UTF-8"> title>Documenttitle> style> #box1{ width: 50px; height:50px; background:#7FFF59; display: inline-block; border:5px solid #FFFD
映纷视觉小例子
Vivian_shuang的博客
07-06 2538
DOCTYPE html> html lang="en"> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> link rel="stylesheet"
冰艺小例子3
Vivian_shuang的博客
07-07 941
DOCTYPE html> html> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> title>title> link rel="stylesheet"
弹性布局小例子
Vivian_shuang的博客
07-06 751
DOCTYPE html> html> head> meta charset="UTF-8"> title>title> style> *{ margin: 0; padding: 0; } html,body,.wrap{ height: 100%; } .wrap{ width: 100%; height: 100%; display:-webki
如家小例子
Vivian_shuang的博客
07-07 725
DOCTYPE html> html lang="en"> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> title>Documenttitle> lin
微信公众号css命名
09-18
微信公众号的CSS命名可以根据以下几点进行规范： 1. 使用小写字母和连接符（-）进行命名，例如：header、content-wrapper。 2. 使用有意义的命名，能够准确描述元素的作用和功能，避免使用无意义的命名，例如：a1、box1。 3. 使用BEM（Block Element Modifier）命名约定，将CSS类名分为块（block）、元素（element）和修饰符（modifier）三个部分，例如：.block、.block__element、.block--modifier。 4. 遵循统一的命名规范，保持整个项目的一致性，方便团队协作和代码维护。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值