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 进行交互。

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

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

下载

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

ID

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

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

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

内联CSS

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

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

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

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

实用程序类

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

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

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

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


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

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

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
class在c语言中的意思
class在c语言中的意思

在C语言中,"class" 是一个关键字,用于定义一个类。想了解更多class的相关内容,可以阅读本专题下面的文章。

788

2024.01.03

python中class的含义
python中class的含义

本专题整合了python中class的相关内容,阅读专题下面的文章了解更多详细内容。

25

2025.12.06

Rust内存安全机制与所有权模型深度实践
Rust内存安全机制与所有权模型深度实践

本专题围绕 Rust 语言核心特性展开,深入讲解所有权机制、借用规则、生命周期管理以及智能指针等关键概念。通过系统级开发案例,分析内存安全保障原理与零成本抽象优势,并结合并发场景讲解 Send 与 Sync 特性实现机制。帮助开发者真正理解 Rust 的设计哲学,掌握在高性能与安全性并重场景中的工程实践能力。

2

2026.03.05

PHP高性能API设计与Laravel服务架构实践
PHP高性能API设计与Laravel服务架构实践

本专题围绕 PHP 在现代 Web 后端开发中的高性能实践展开,重点讲解基于 Laravel 框架构建可扩展 API 服务的核心方法。内容涵盖路由与中间件机制、服务容器与依赖注入、接口版本管理、缓存策略设计以及队列异步处理方案。同时结合高并发场景,深入分析性能瓶颈定位与优化思路,帮助开发者构建稳定、高效、易维护的 PHP 后端服务体系。

58

2026.03.04

AI安装教程大全
AI安装教程大全

2026最全AI工具安装教程专题:包含各版本AI绘图、AI视频、智能办公软件的本地化部署手册。全篇零基础友好,附带最新模型下载地址、一键安装脚本及常见报错修复方案。每日更新,收藏这一篇就够了,让AI安装不再报错!

30

2026.03.04

Swift iOS架构设计与MVVM模式实战
Swift iOS架构设计与MVVM模式实战

本专题聚焦 Swift 在 iOS 应用架构设计中的实践,系统讲解 MVVM 模式的核心思想、数据绑定机制、模块拆分策略以及组件化开发方法。内容涵盖网络层封装、状态管理、依赖注入与性能优化技巧。通过完整项目案例,帮助开发者构建结构清晰、可维护性强的 iOS 应用架构体系。

59

2026.03.03

C++高性能网络编程与Reactor模型实践
C++高性能网络编程与Reactor模型实践

本专题围绕 C++ 在高性能网络服务开发中的应用展开,深入讲解 Socket 编程、多路复用机制、Reactor 模型设计原理以及线程池协作策略。内容涵盖 epoll 实现机制、内存管理优化、连接管理策略与高并发场景下的性能调优方法。通过构建高并发网络服务器实战案例,帮助开发者掌握 C++ 在底层系统与网络通信领域的核心技术。

25

2026.03.03

Golang 测试体系与代码质量保障:工程级可靠性建设
Golang 测试体系与代码质量保障:工程级可靠性建设

Go语言测试体系与代码质量保障聚焦于构建工程级可靠性系统。本专题深入解析Go的测试工具链(如go test)、单元测试、集成测试及端到端测试实践,结合代码覆盖率分析、静态代码扫描(如go vet)和动态分析工具,建立全链路质量监控机制。通过自动化测试框架、持续集成(CI)流水线配置及代码审查规范,实现测试用例管理、缺陷追踪与质量门禁控制,确保代码健壮性与可维护性,为高可靠性工程系统提供质量保障。

79

2026.02.28

Golang 工程化架构设计:可维护与可演进系统构建
Golang 工程化架构设计:可维护与可演进系统构建

Go语言工程化架构设计专注于构建高可维护性、可演进的企业级系统。本专题深入探讨Go项目的目录结构设计、模块划分、依赖管理等核心架构原则,涵盖微服务架构、领域驱动设计(DDD)在Go中的实践应用。通过实战案例解析接口抽象、错误处理、配置管理、日志监控等关键工程化技术,帮助开发者掌握构建稳定、可扩展Go应用的最佳实践方法。

61

2026.02.28

热门下载

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

精品课程

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

共14课时 | 0.9万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.5万人学习

CSS教程
CSS教程

共754课时 | 40万人学习

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

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