css/less/scss代码注意事项

这篇具有很好参考价值的文章主要介绍了css/less/scss代码注意事项。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一.命名

1.类名使用小写字母,以中划线分割;id 使用 驼峰式命名;
2.less/scss中的函数、混合采用驼峰命名;
3. class 的命名不要使用 标签名,如.p .div .img;

二.选择器

尽量使用直接子选择器,否则,有时会造成性能损耗
.content .title { ... }(不推荐)(后代选择器)
.content > .title { ... } (推荐)(子选择器)

三.尽量使用缩写的属性

border-style: solid; 
border-width: 1px; 
border-color: red;`

写成

border: 1px solid red;

四.每个选择器及属性独占一行

不推荐下面的这种写法

img { width: 100%;box-shadow: 3px 3px 3px 3px  #333;}

五.省略 0 后面的单位

width: 0;
height: 0;
border-width: 0;

六.避免使用 ID 选择器及 全局标签污染全局样式

能不用 id选择器 就不要 使用id选择器,避免不是禁止

七、less/scss 避免嵌套等级过多,将嵌套深度限制在3层以内

八.项目命名

1.全部采用小写的方式
2.以中划线分割
例:smart-cellphone

九.目录命名

1.全部采用小写的方式
2.以中划线命名
3.复数时,要采用复数结构例:imagesassets等;

十.JS、CSS、SCSS、HTML、PNG等文件命名

全部采用小写的方式以中划线命名
例:home.html /index.less /public.css /login-logo.jpg文章来源地址https://www.toymoban.com/news/detail-759505.html

未完待续

到了这里,关于css/less/scss代码注意事项的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 低代码选型注意事项

    凭借着革命性的生产力优势,低代码技术火爆了整个IT圈。面对纷繁复杂的低代码和无代码产品,开发者该如何选择? 在研究低代码平台的年数上,本人已有3年,也算是个低代码资深用户了,很多企业面临低代码选型上的困难,选平台容易,换平台难。下面基于个人理解给大

    2024年02月03日
    浏览(55)
  • 链接VPN后push GitHub代码注意事项

    将OpenSSL SSL_read: Connection was reset, errno 10054翻译成中文打开SSL SSL_read:连接已重置,错误 10054。 这样解释可能也比较模糊,通俗点说服务器的SSL证书灭有经过第三方机构的签署。但也有人说可能是网络不稳定,连接超时导致。 解决方案 1.更改git配置 如果上述指令无法解决你的

    2024年02月12日
    浏览(34)
  • java分布式项目需要进行注意的事项(代码层面)

    在分布式系统中,使用主键自增会引发一系列问题。以下是几个主要原因: 高并发冲突:在分布式系统中,多个节点同时生成主键时会产生冲突。因为每个节点都有自己的自增序列,同时生成的主键可能会有重复。 单点故障:使用主键自增通常依赖于一个中心节点或数据库

    2024年04月22日
    浏览(44)
  • 51单片机io口的应用,注意事项及实例代码并标注

      51单片机是一种广泛使用的8位微控制器,它具有多个I/O(输入/输出)端口。根据不同的厂商,51单片机可能有不同数量的I/O端口。在此,我们以常见的AT89C51单片机为例,讨论其各I/O端口的区别及应用实例。 1. P0端口:P0端口为地址/数据复用端口,其控制信号线共用。在实际

    2024年02月06日
    浏览(51)
  • C#反射的学习,反射的一些注意事项,反射的一些使用代码的实例

    本文档写的的是C#中的反射常用的方式(附带示例代码)以及在使用的时候的一些注意事项。 C#中的反射是一种强大的机制,它允许在运行时动态地检查、访问和操作程序的元数据、类型信息和对象。以下是C#中反射常用的技巧和使用方式: 获取类型信息:使用Type类可以获取

    2024年02月06日
    浏览(48)
  • 前端移动端布局自适应 及移动端和PC端共用一套代码注意事项

    前端移动端布局自适应 目录 一、自适应布局概念? 二、使用步骤 1. head标签里要写适用移动端 2. 自适应单位问题 3. CSS如何写? 总结 前言 移动端布局需要适应不同大小手机平板屏幕,所以字体图片等尺寸就要做到随着屏幕大小的变化去自适应,这样会给用户很好的体验感和

    2024年02月08日
    浏览(41)
  • HTML实现微信小程序跳转全指南,附代码示例和开发注意事项

    学习如何在HTML页面中实现微信小程序跳转,包括前端准备工作、签名验证、后端配置等详细步骤。本文提供了代码示例和开发注意事项,帮助您顺利完成微信小程序的跳转功能。

    2024年02月11日
    浏览(42)
  • post-css/less/sass样式嵌套与命令之"&"符号—BEM

    看了《 less 的 详解 https://www.jianshu.com/p/127b0974cfc3》,对于此文再做一别补充 直接嵌套写法 这一类是最常见的   这个一类是我们日常所常见的 父选择器运算符 的作用,就是让当前的选择器和父级选择器,按照特定的规则进行连接。它有多种用途,比如创建重复的类名: 输

    2023年04月09日
    浏览(41)
  • 使用scss/less修改vant UI样式的方法

    在vue实际项目开发中,我们避免不了使用一些开源的UI组件库,style的样式中都会增加 scoped 标识只会在当前页面中去使用,这就涉及到了如何修改默认组件样式的问题了。 1.在使用scss的情况下,要使用::v-deep,/deep/是不支持的,会报错。 2.在使用less的情况下,使用::v-deep或

    2024年02月13日
    浏览(33)
  • AD9910模块高速DDS模块、功能性能讲解、开发调试注意事项、代码详解、电子设计大赛DDS

    AD9910是一款内置14 bit DAC的直接数字频率合成器(DDS),支持高达1GSPS的采样速率。AD9910采用高级DDS技术,在不牺牲性能的前提下可极大降低功耗。DDS/DAC组合构成数字可编程的高频模拟输出频率合成器,能够在高达400MHz的频率下生成频率捷变正弦波形。 用户可以访同三个用于控制

    2024年02月16日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包