#yyds干货盘点#如何组织你的CSS代码

​ 前言 今天在逛推特的时候看到了国外的一个大佬发的贴子,主要是介绍了如何管理自己的CSS代码。我觉得他的管理方法还是不错的。当然,每个公司,每个人的管理方式都是不一样的。大家可以借鉴,取他之长。补己之短。 https://twitter.com/_georgemoller/status/1438168695176634374?s=05 文件夹划分 按照不同的功能划分文件夹,例如组件样式,布局样式,还有全局的变量。 CSS - base - reset.css - typography.css - components - buttons.css - dropdown.css - layout - navagation.css - utils - variables.css - vendors - bootstrap.min.scss - pages - login.css - contact.css base base主要存放reset文件以及一些文字排版的文件 reset.css body{ margin: 0; padding: 0; } ol,ul{ list-style: none; } a{ text-decoration: none; } typography.css h1{ font-size: 4.4rem; } h2{ font-size: 2.6rem; } h3{ font-size: 2.8rem; } h4{ font-size: 1.2rem; } h5{ font-size: 1rem; } component 这里主要存放跟组件(button,imputs,modals等等)相关的样式。 button.css .btn{ display: block; color: black; background-color: transparent; } .btn.disabled{ pointer-events: none; } .btn-primary{ background: blue; color: white; } dropdown.css .dropdown{ cursor: pointer; position: relative; display:inline-block; outline: none; } .dropdown .menu{ cursor: auto; position: absolute; display: none; outline: none; } layout 这里主要存放网页中布局的主要式样,例如header,footer,navaigation,siderbar。 header.css header{ display: flex; padding: 1rem; font-size:2rem; line-height: 2rem; color: #000; background-color: #fff; } utils 这里主要存放全局的变量,共同的样式等等。 variables.css :root{ --color-blue:#od6efd; --font-primary:"inter" ,sans-serif; --font-big:2rem; } utils.css .hidden{ display: none; } .mt-5{ margin-top: 5rem; } vendors 文件夹 这里主要存放第三方CSS库,例如bootstrap,Foundation等等。 pages 文件夹 这里存放对页面的特殊定义样式。 login.css .login-form{ display: flex; flex-direction: column; padding: 10rem 8rem; z-index:1; } .login-logo{ height: 5rem; margin-bottom: 2rem; position: relative; } 使用 可以在不同的文件中单独引用,也可以创建一个全局的css文件引入。 引入的时候要注意先后顺序,防止样式覆盖 main.css @import './vendors/bootstrap.css'; @import './base/reset'; @import './base/typography.css'; @import './components/button.css'; @import './components/dropdown.css'; @import './utils/variables'; @import './utils/utils.css';

尚美源码坑位教程提供精美的网站源码教程,小程序、公众号、H5、APP、游戏、直播、支付、区块链、商城、影音、小说等源码信息大全。
尚美源码教程库 » #yyds干货盘点#如何组织你的CSS代码
赞助VIP 享更多特权,立即登录下载海量资源
喜欢我嘛?喜欢就按“ctrl+D”收藏我吧!♡