0

0

我如何编写 CSS 选择器

WBOY

WBOY

发布时间:2024-09-03 10:33:40

|

663人浏览过

|

来源于dev.to

转载

我如何编写 css 选择器

CSS 方法有很多,但我都讨厌它们。有些多(顺风等),有些少(BEM、OOCSS 等)。但归根结底,它们都有缺陷。

当然,人们使用这些方法有充分的理由,并且解决的许多问题我也遇到过。因此,在这篇文章中,我想写下我自己的关于如何保持 CSS 井井有条的指南。

这并不是一个任何人都可以开始使用的完整描述的 CSS 方法。也许它可以通过一些额外的工作变成一个,但这篇文章的目的只是展示我在编写 CSS 时如何做出这些决定。

内置元素

根据经验,我尝试尽可能多地使用内置元素类型,并尽可能少地使用额外的内容。

立即学习前端免费学习笔记(深入)”;

需要上千种不同类型的按钮,这表明设计可能在更深层次上存在问题,因此,在某些情况下,我觉得 CSS 在使用特定于框架的类之前是惰性的。 ,在大多数情况下,当按钮只是 并且看起来像一个没有任何进一步魔法的按钮时,我认为它是理想的。

div.btton 应该变成按钮

自定义元素

并非所有设计元素都具有语义上合适的 HTML 等效项,对于这些情况,我通常采用自定义元素。

我还没有看到很多在没有任何附带 JavaScript 的情况下使用自定义元素名称的实例,但它已被证明是编写清晰的 HTML 的一个令人惊讶的可靠选择,而且看起来也符合我想要的方式。

随着时间的推移,在设计方面完全独立的元素也更有可能开发出只能使用 JavaScript 实现的需求,这为您提供了一条清晰的路径来实现那些不需要对 HTML 进行任何更改也不需要进行任何更改的需求。 CSS。

div.vsep 应该变成垂直分隔符

课程

类应该充当现有节点名称的修饰符,而不是全新的元素类型,并且通常对不同的元素类型具有相似但不同的效果。

危险按钮就是按钮。危险

属性

某些修改元素的方法并不是类有用的简单开/关开关,而是更像键值对

在这些情况下,具有匹配选择器的自定义属性几乎每次使用它们时都被证明是最佳选择。与带连字符的类不同,它们在语法级别上显示哪个是属性,哪个是值,使编辑器更容易突出显示它们,更容易人眼快速解析,并且更容易使用 JavaScript 进行交互。

对于我们这些仍然希望 attr() 函数有一天能够进入 CSS 的人来说,这不仅仅是内容,这也是面向未来的额外一层。

玻璃钢企业网站源码1.5
玻璃钢企业网站源码1.5

本程序源码为asp与acc编写,并没有花哨的界面与繁琐的功能,维护简单方便,只要你有一些点点asp的基础,二次开发易如反掌。 1.功能包括产品,新闻,留言簿,招聘,下载,...是大部分中小型的企业建站的首选。本程序是免费开源,只为大家学习之用。如果用于商业,版权问题概不负责。1.采用asp+access更加适合中小企业的网站模式。 2.网站页面div+css兼容目前所有主流浏览器,ie6+,Ch

下载

ID

根据定义,ID 在文档中是唯一的。因此,任何针对特定 ID 的规则都将受到限制,并且如果后来发现lage 上应该存在多个这种类型的元素,则可能需要重构。

因此,应谨慎使用 ID,并且仅当一个文档中包含多个元素没有意义时才应使用 ID。

在实用性和可读性方面优于类的好处相当小,因此,当无法识别元素和样式之间明确的一对一关系时,选择类通常是最好的主意。

内联CSS

任何现实世界的应用程序在某些时候都会有一些元素,只需要单独调整,以使它们在出现的上下文中更加美观。

在这些情况下,样式属性就是正确的选择。任何使用它被认为是不好的做法的原因都适用于任何类型的内联样式,包括实用程序类。问题不在于属性,而在于样式和标记的混合。

内联样式的 style 和 class 之间的一个区别是,一个表示目的,允许使用纯 CSS 并且大多是通用的,而另一个则不然。

简单地说,width: 100px 具有通用定义的含义,而 .width-100 可以表示任何含义。

实用程序类

在极少数情况下,特定于元素的样式变得如此复杂,以至于显式内联它们会损害可读性,甚至是不可能的(例如,如果它需要媒体查询)。

在这些情况下,实用程序类基本上是唯一的选择,即使它们很丑陋。

在理想的世界中,这些可以与特定的 mixin 类分开处理,我什至考虑过使用前缀来更容易地区分它们,但最终没有找到一个好方法让它们不难看。

我喜欢在实用程序类前面加上 + 前缀来表示它们向元素添加某种功能,与指定元素类型的普通类不同。


就是这样。当然,没有两个项目是相同的,有时必须稍微调整规则才能保持实用,但总的来说,这是我决定如何使屏幕上的事物看起来某种方式的框架。

你有什么想法?你讨厌它吗?你觉得有道理吗?在评论中让我知道?

相关专题

更多
js获取数组长度的方法
js获取数组长度的方法

在js中,可以利用array对象的length属性来获取数组长度,该属性可设置或返回数组中元素的数目,只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值,也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容,供大家免费下载使用。

554

2023.06.20

js刷新当前页面
js刷新当前页面

js刷新当前页面的方法:1、reload方法,该方法强迫浏览器刷新当前页面,语法为“location.reload([bForceGet]) ”;2、replace方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,不能通过“前进”和“后退”来访问已经被替换的URL,语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

374

2023.07.04

js四舍五入
js四舍五入

js四舍五入的方法:1、tofixed方法,可把 Number 四舍五入为指定小数位数的数字;2、round() 方法,可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

731

2023.07.04

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

477

2023.09.01

JavaScript转义字符
JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号,可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容,供大家免费下载体验。

394

2023.09.04

js生成随机数的方法
js生成随机数的方法

js生成随机数的方法有:1、使用random函数生成0-1之间的随机数;2、使用random函数和特定范围来生成随机整数;3、使用random函数和round函数生成0-99之间的随机整数;4、使用random函数和其他函数生成更复杂的随机数;5、使用random函数和其他函数生成范围内的随机小数;6、使用random函数和其他函数生成范围内的随机整数或小数。

991

2023.09.04

如何启用JavaScript
如何启用JavaScript

JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍:1、内联脚本是将JavaScript代码直接嵌入到HTML标签中;2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中;3、外部脚本是将JavaScript代码放置在一个独立的文件;4、外部脚本是将JavaScript代码放置在一个独立的文件。

656

2023.09.12

Js中Symbol类详解
Js中Symbol类详解

javascript中的Symbol数据类型是一种基本数据类型,用于表示独一无二的值。Symbol的特点:1、独一无二,每个Symbol值都是唯一的,不会与其他任何值相等;2、不可变性,Symbol值一旦创建,就不能修改或者重新赋值;3、隐藏性,Symbol值不会被隐式转换为其他类型;4、无法枚举,Symbol值作为对象的属性名时,默认是不可枚举的。

551

2023.09.20

C++ 单元测试与代码质量保障
C++ 单元测试与代码质量保障

本专题系统讲解 C++ 在单元测试与代码质量保障方面的实战方法,包括测试驱动开发理念、Google Test/Google Mock 的使用、测试用例设计、边界条件验证、持续集成中的自动化测试流程,以及常见代码质量问题的发现与修复。通过工程化示例,帮助开发者建立 可测试、可维护、高质量的 C++ 项目体系。

3

2026.01.16

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 0.8万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.9万人学习

CSS教程
CSS教程

共754课时 | 19.2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号