首页 > 其他分享 >2024,该放弃框架来实现 Web 布局了

2024,该放弃框架来实现 Web 布局了

时间:2024-08-10 10:05:26浏览次数:18  
标签:Web layout 框架 样式 布局 2024 CSS

在这里,我并不想评论 CSS 框架和库的好坏,但一个不争的现实就是,很多 Web 开发者很容易在众多的 CSS 框架库中迷失方向。甚至,每个框架和库都向 Web 开发者承诺,将提供更简单的样式和更流畅的 Web 布局。然而,在当下,现代 CSS 特性 提供了更简单和更灵活的方法,你完全可以不依赖任何 CSS 框架库就能构建出你想要的 Web 布局效果!

当下的现实就是,大部分 Web 开发者过度依赖各种框架,包括 CSS 方面的框架或库,来处理样式上的事情,其中就包括为 Web 网站或应用构建布局。尽管通过配置框架可以实现我们所需的功能,但试问你有多少次仅仅为了实现 Web 布局而整合整个 CSS 框架或库呢?我相信我们当中有许多人在某个时刻都这样做过,甚至现在依旧还在这样做。

今天,我想通过这篇文章告诉大家的是,现代 CSS 提供了很多优秀的特性,它们可以为 现代 Web 布局 提供更好、更灵活的布局方案,你完全无需仅为布局而使用框架。而且这些特性,将为你对 Web 布局获得更大的控制权。

Web 布局一直以来对于众多 Web 开发者来说是具有一定的挑战性,但随着 现代 CSS 特性 的出现,这些挑战逐渐变得越来越没有难度。甚至包括很多 创意性布局和异形布局 !

接下来,我们将会探讨如何使用现代 CSS 特性为 Flexbox 和 Grid 布局提供更强大的便利性,例如流体布局和重复布局。在这个过程中,我将整合 CSS 容器查询,使这些布局根据自身的大小而不是视窗大小进行响应,与此同时,还将应用 CSS 级联层特性,进一步允许你控制样式,防止样式发生冲突。

这意味着,你需要对现代 CSS 的一些特性有一定的认识,易于帮助你更好的阅读和理解下面的内容。如果你对现代 CSS 特性不怎么熟悉,那么个人强烈建议你购买我的小册——《现代 CSS》,它将将使你深度掌握 CSS 各种最新特性。

有效利用 CSS 级联层和变量特性
使用过 CSS 框架或相关方法论的开发者,对于 CSS 级联层和变量这两个概念不会感到陌生。因为大多 CSS 框架都会使用它们来管理和维护 CSS 。例如,ITCSS ,它就以下图这样的方式来管理 CSS:
如今,不需要这么麻烦了,我们可以使用 CSS 的 @layer 规则 来管理 CSS。这个特性不仅可以使样式整洁有序,还允许我们通过按特定的顺序组织这些层来影响每个层的权重。这些使我们创建的 CSS 更易于维护,并可以轻松地集成到你的项目中,而且还不会遇到样式权重的冲突。
在我们今天要聊的内容中,我认为以下三个层足够了:
@layer reset, theme, layout;
排列在前面的层,其权重越低。因此,我把 reset 层排在第一,使其成为所有层中权重最低的一层;layout 层排在最后,使其权重最高,优先级高于其他两个层中的样式。
注意,如果我们添加一个没有层级的样式,它将被统一放置在一个名叫匿名层中,其权重是最高的。
说实话,我现在恋上了这个级联层规则,不管是在平时的项目中,还是在 Codepen 写案例,我都习惯性的使用它来组织我的 CSS 代码。
非常遗憾的是,今天的主题并不是聊 CSS 的级联层,因此我无法使用更多的篇幅来向大家阐述它。如果你想深入的了解她,请移步阅读《CSS 分层:@layer》一文。
既便如此,还是要花点时间来聊聊这三个层在工作中应该如何使用。
reset 层比较好理解,这个层将包含我们希望“重置”浏览器样式的样式,比如你项目中的 reset.css 和 normalize.css 文件中的代码就可以放在这个层中。当然,你也可以使用之前的方式,通过单独的样式文件来“重置”浏览器默认样式。但需要记住,在引入样式文件时,要是没有使用级联规则 @layer 定义它的层级顺序,它将会被认为是匿名层级,具有最高的权重。这种情况之下,很有可能会给你造成一定的困惑。
不过,我个人习惯性喜欢在 reset 层中,使用简单“重置”样式,例如:
@layer reset { *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } }
这种方式简单且粗暴,有时候也会使你为其他元素添加不少样式。比如,为 p 、h1 ~ h6 等元素设置 margin 等。因此,你需要根据自己的习惯和项目环境,配置比较合适的“重置”样式。
接下来是 theme 层。从其名应该大致知道这个层的作用。是的,它就是用来设置与主题相关的样式,例如、颜色、间距等属性。在这里,我们在 :root 中定义一些与布局相关的 CSS 变量。例如:
@layer theme { :root { --layout-fluid-min: 35ch; --layout-default-repeat: 3; --layout-default-gap: 3vmax; --layout-default-ram-size: min(100% - 2rem, 300px); } }
我习惯性在 :root 上定义这些与布局相关的变量,因为布局容器通常是许多其他元素的包装器,全局作用域可以确保变量在我们想要用的地方都可以被引用。不过,如果需要,也可以将这些变量作为局部变量,用于指定的元素上。
注意,上面的演示代码,其中 layout- 前缀只是用于标识,这些变量是用于布局上的,你可根据自己的喜好来调整,比如使用一个简写的 l- 来表示。我更想说的是,虽然只是几行简短的示例代码,但它包含多个现代 CSS 特性:

  • CSS 自定义属性,也俗称 CSS 变量,它是以 -- 为前缀定义变量名称,然后通过 var() 函数来引用。有关于这方面更详细的介绍,可以移步阅读《CSS 自定义属性你知道多少》和《CSS 自定义属性可以用来做些什么》

  • ch 和 vmax 都是现代 CSS 中相对单位,其中 ch 是字体相对单位,vmax 是视窗相对单位。除此之外,还新增很多相对单位,比如 cqw 、lh 等。有关于这方面更详细的介绍,可以移步阅读《现代 CSS 中的相对单位》

  • min() 函数是 CSS 的比较函数,与其同时出现的还有 max() 和 clamp() 函数。这三个函数在现代 Web 布局中非常有用。例如,min() 函数,将会根据提供的参数列表中返回最小的值。有关于这方面的介绍,可以移步阅读《CSS 的比较函数:min() 、max() 和 clamp()》

  • ram,它更专业的写法是大写的,即 RAM 。它表示的是现代 Web 布局中的一个经典布局技术。利用 CSS Grid 布局中的 repeat() 和 minmax() 函数以及 auto-fit 或 auto-fill 属性实现自动换行布局(注意,不是文本换行)

是不是信息量有点爆棚!

作者:大漠_w3cpluscom
链接:https://juejin.cn/post/7377355452890726409
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

标签:Web,layout,框架,样式,布局,2024,CSS
From: https://www.cnblogs.com/xiins/p/18351984

相关文章

  • 常见框架漏洞复现
    环境使用Debian虚拟机,配置docker与docker-composeaptinstalldocker.ioaptinstalldocker-compose配置后下载vulhub靶场gitclonehttps://github.com/vulhub/vulhub.git后发现,环境还是无法启动成功,重新打开终端输入dockerhub加速服务sudomkdir-p/etc/dockersudo......
  • 【ACM出版,见刊检索快速稳定】第四届物联网与机器学习国际学术会议(IoTML 2024,8月23-25)
    2024年第四届物联网与机器学习国际学术会议(IoTML2024)将于2024年8月23-25日在中国南昌召开。会议将围绕着物联网和机器学习开展,探讨本领域发展所面临的关键性挑战问题和研究方向,以期推动该领域理论、技术在高校和企业的发展和应用,为专注于该研究领域的创新学者、工程师和......
  • 1、.Net UI框架:WinUI - .Net宣传系列文章
    WinUI(WindowsUILibrary)是微软提供的一个用于构建Windows应用程序的本机UI平台组件。它与Windows应用SDK紧密相关,允许开发者创建适用于Windows10及更高版本的应用程序,并且可以发布到MicrosoftStore。WinUI3是最新的一代,它提供了与操作系统分离的整个WinUIstack,支持F......
  • 2024年网络信息安全工程师面试题,看看你能做几个?
    一、网络安全网络安全的概念和重要性是什么?常见的网络攻击方式有哪些?网络安全防御措施有什么?计算机病毒和恶意软件有哪些?网络安全法律法规有什么?二、网络协议什么是TCP/IP协议?它包括哪些层次?请简要介绍每个层次的作用。什么是HTTP协议?请简要介绍HTTP协议的......
  • 2024最全最新VMWare以及Linux配置(含yum失效解决方案)
    血泪教训浓缩的精华配置、报错解决(解决99%问题) 目录1.Linux环境搭建1.1安装VMWare1.1.1卸载老版本VMWare(如果有的话) 1.1.2开始安装VMware1.2创建虚拟机1.3安装Centos71.4设置虚拟机快照1.5安装远程连接SSH客户端 重要:新的yum镜像源需要配置(几乎人人都要配置,必......
  • 【保奖思路】2024年华为杯研究生数学建模D题解题思路分享(点个关注,后续会更新
    您的点赞收藏是我继续更新的最大动力!一定要点击如下的卡片链接,那是获取资料的入口!点击链接加入群聊【2024华为杯研赛资料汇】:http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=MwNruKbEvR9aZns1l7xXBWmQQKYAEh-F&authKey=igaBN79pz6BhNlDQ6TIZ5YFAbn71aDcYL77uANPquLF%2FTVgeSAhE......
  • 【保奖思路】2024年华为杯研究生数学建模D题解题思路分享(点个关注,后续会更新
    您的点赞收藏是我继续更新的最大动力!一定要点击如下的卡片链接,那是获取资料的入口!点击链接加入群聊【2024华为杯研赛资料汇】:http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=MwNruKbEvR9aZns1l7xXBWmQQKYAEh-F&authKey=igaBN79pz6BhNlDQ6TIZ5YFAbn71aDcYL77uANPquLF%2FTVgeSAhE......
  • 【人工智能】常用的人工智能框架、模型、使用方法、应用场景以及代码实例的概述
    人工智能(AI)领域涉及众多框架和模型,这些框架和模型为开发人员提供了强大的工具,以构建和训练各种AI应用。以下是一些常用的人工智能框架、模型、使用方法、应用场景以及代码实例的概述。一、常用框架1.TensorFlow简介:TensorFlow是一个由谷歌开发的开源深度学习框架,支持大规模......
  • WebDAV服务不能上传大文件,文件超过50M报错[0x800700DF]怎么办?
    这个问题需要分别从服务端和客户端解决。1.Windows客户端解除50M文件限制,Windows访问Webdav服务时,大于50M文件提示错误[错误:0x800700DF]部署了webdav,Windows10映射网络磁盘,传输文件超过大约50MB的文件会弹出“0x800700DF:文件大小超过允许的限制,无法保存”,或者报错:“无法读......
  • 2024-8-9 算法学习
    P5788【模板】单调栈题意:给定一个数列,求数列中每一个元素之后第一个大于该元素的下标若存在一个数大于它之后的数,那么当我们在左边计算答案的话,那个较小的数不可能被统计到。所以利用单调栈的做法,和右边的比就从右边统计,维护一个栈就行了P6510奶牛排队题意:给定一个数列,求......