《CSS 简易速速上手小册》第9章:CSS 最佳实践(2024 最新版)

在这里插入图片描述

文章目录

  • 9.1 维护大型项目的 CSS
    • 9.1.1 基础知识
    • 9.1.2 重点案例:构建一个可复用的 UI 组件库
    • 9.1.3 拓展案例 1:优化现有项目的 CSS 结构
    • 9.1.4 拓展案例 2:实现主题切换功能
  • 9.2 BEM、OOCSS 和 SMACSS 方法论
    • 9.2.1 基础知识
    • 9.2.2 重点案例:使用 BEM 构建一个用户界面组件
    • 9.2.3 拓展案例 1:应用 OOCSS 原则重构 CSS
    • 9.2.4 拓展案例 2:使用 SMACSS 策略管理项目样式
  • 9.3 使用 CSS Linters 和 Style Guides
    • 9.3.1 基础知识
    • 9.3.2 重点案例:集成 Stylelint 到项目中
    • 9.3.3 拓展案例 1:创建项目特定的 Style Guide
    • 9.3.4 拓展案例 2:利用 CSS 变量实现 Style Guide 中的设计系统

9.1 维护大型项目的 CSS

在大型项目中维护CSS是一项挑战,但也是保持项目长期健康、可维护性和扩展性的关键。良好的CSS架构可以减少未来的头痛,让你的网站或应用即使在不断增长和变化时,也能保持优雅和高效。

9.1.1 基础知识

  • 模块化:把CSS代码分割成多个小文件,根据功能、组件或页面进行组织。这种方法简化了代码的查找、更新和测试。
  • 命名规范:采用一致的命名规则,如BEM(块、元素、修饰符),以避免样式冲突和提高代码的可读性。
  • CSS预处理器:Sass、Less等预处理器提供变量、混入、函数和嵌套等功能,帮助创建更动态和可维护的样式表。
  • 组件化:将UI拆分成重用的组件,每个组件有自己的样式,这样可以提高样式的复用性和一致性。
  • 文档化:为CSS代码和组件创建文档,确保团队成员能够理解和遵循设计规范。

9.1.2 重点案例:构建一个可复用的 UI 组件库

假设你的团队正在开发一个大型的电商平台,需要构建一套可复用的UI组件库来加速开发过程。

  • 实践步骤
    • 组件拆分:将UI拆分成基础组件(如按钮、输入框、卡片)和复合组件(如产品卡、导航栏)。
    • 样式封装:为每个组件创建独立的样式文件,使用Sass或Less来管理组件的变量和混入。
    • 命名规范:采用BEM命名规则来确保类名的一致性和可预测性。
    • 文档化:使用Storybook或其他工具为组件创建交互式文档,方便团队成员查找和使用组件。

9.1.3 拓展案例 1:优化现有项目的 CSS 结构

在一个已经开发一段时间的项目中,CSS代码可能变得难以管理。进行优化可以提高项目的可维护性。

  • 优化步骤
    • 审查和合并:审查现有的CSS文件,合并重复的样式规则,移除未使用的样式。
    • 模块化重构:按照功能或组件将CSS代码重构成模块化的结构。
    • 样式指南:创建一个样式指南,记录CSS的使用规则和最佳实践。

9.1.4 拓展案例 2:实现主题切换功能

为网站实现深色模式和浅色模式的切换功能,提升用户体验。

  • 实践步骤
    • 定义主题变量:使用CSS预处理器定义主题相关的变量,如颜色、字体等。
    • 创建主题类:为深色模式和浅色模式创建对应的CSS类,通过JavaScript根据用户选择切换类名。
    • 响应式媒体查询:利用prefers-color-scheme媒体查询自动匹配用户系统的主题偏好。

通过实施这些CSS最佳实践,你的项目将更加健壮、易于管理,同时也能提供更好的开发体验和用户体验。维护大型项目的CSS可能需要一些额外的时间和努力,但长远来看,这些投资将为项目的成功打下坚实的基础。

在这里插入图片描述


9.2 BEM、OOCSS 和 SMACSS 方法论

在CSS的世界里,维持大型项目的样式代码既整洁又可维护是一项挑战。幸运的是,BEM、OOCSS和SMACSS这三种CSS方法论提供了强大的策略来组织和管理你的CSS,让代码不仅易于理解,而且易于扩展。

9.2.1 基础知识

  • BEM(Block Element Modifier):一种命名约定,通过明确地描述块(Block)、元素(Element)和修饰符(Modifier),来帮助开发者理解关于代码之间关系的更多信息。
  • OOCSS(Object Oriented CSS):将CSS分解为可重用的对象(即模块),促进代码复用和页面渲染效率。
  • SMACSS(Scalable and Modular Architecture for CSS):一种风格指南,提供关于如何将CSS分割成更小、更管理的片段的建议,以及如何构建可扩展的样式指南。

9.2.2 重点案例:使用 BEM 构建一个用户界面组件

假设你正在构建一个评论卡片组件,该组件包括标题、内容和一个赞同按钮。

  • HTML 结构
<div class="comment-card"><h2 class="comment-card__title">评论标题</h2><p class="comment-card__content">这里是评论内容。</p><button class="comment-card__button--like"></button>
</div>
  • CSS 样式
.comment-card { /* 块样式 */ }
.comment-card__title { /* 元素样式 */ }
.comment-card__content { /* 元素样式 */ }
.comment-card__button--like { /* 修饰符样式 */ }

通过BEM方法,每个类名都清晰地表明了它是什么(块?元素?修饰符?),以及它属于哪个部分。

9.2.3 拓展案例 1:应用 OOCSS 原则重构 CSS

考虑一个网站有多个部分需要展示用户的个人信息卡片。使用OOCSS原则,我们可以将这个个人信息卡片抽象成一个可重用的对象。

  • CSS 样式
.user-card { /* 定义结构 */ }
.user-card .info { /* 定义样式 */ }

通过将通用样式(如.info)从特定组件中抽象出来,我们能够在不同的地方重用这些样式,从而减少代码重复并提高效率。

9.2.4 拓展案例 2:使用 SMACSS 策略管理项目样式

假设你负责的项目样式文件变得庞大而难以管理。采用SMACSS策略,你可以将CSS分割成几个主要的类别,比如基础、布局、模块、状态和主题。

  • 样式组织
// 基础样式
base.scss// 布局样式
layout.scss// 模块样式
modules/// 状态样式
states.scss// 主题样式
themes.scss

通过SMACSS,我们可以为不同类型的CSS规则提供明确的指导,帮助维护大型项目的样式代码,使其更加清晰和可维护。

BEM、OOCSS和SMACSS提供了不同的视角和策略来组织CSS代码,帮助开发者和设计师创建可维护、可扩展和高效的样式。选择适合你项目和团队工作流的方法论,可以使你的开发过程更加顺畅,让你更专注于创造出色的用户体验。

在这里插入图片描述


9.3 使用 CSS Linters 和 Style Guides

为了确保CSS代码的一致性、可维护性和高质量,使用CSS Linters和Style Guides是至关重要的。它们就像是编写CSS时的导师和守门人,引导你遵循最佳实践,同时自动检查和纠正潜在的问题。

9.3.1 基础知识

  • CSS Linters:是工具,用于自动检查CSS代码,发现错误和不一致的编码风格。常用的CSS Linters包括Stylelint、CSSLint等。
  • Style Guides:是一组编码规范和最佳实践的文档,它定义了如何编写CSS代码的规则。Style Guides可以是通用的,如Google的CSS Style Guide,也可以是针对具体项目的自定义规范。

9.3.2 重点案例:集成 Stylelint 到项目中

假设你正在开发一个大型Web应用,并希望确保团队成员遵守相同的CSS编码标准。

  • 实践步骤

    1. 安装Stylelint:通过npm或yarn安装Stylelint及其配置包。

      npm install stylelint stylelint-config-standard --save-dev
      
    2. 配置Stylelint:在项目根目录创建.stylelintrc文件,定义规则。

      {"extends": "stylelint-config-standard","rules": {"color-hex-length": "long","number-leading-zero": null}
      }
      
    3. 运行Stylelint:在项目的构建脚本中集成Stylelint命令,或者使用编辑器插件实时检查。

9.3.3 拓展案例 1:创建项目特定的 Style Guide

为了保持项目样式的一致性,你决定为你的项目创建一个具体的Style Guide。

  • 实践步骤
    1. 定义基本原则:确定如何使用颜色、字体、间距等基本设计元素。
    2. 编写文档:使用Markdown或其他格式编写Style Guide,详细说明CSS类的命名规范、布局规则等。
    3. 分享与教育:在团队会议上介绍Style Guide,并确保所有开发者都能访问和理解这些规则。

9.3.4 拓展案例 2:利用 CSS 变量实现 Style Guide 中的设计系统

随着设计系统在现代Web开发中变得越来越重要,你决定使用CSS变量来实现Style Guide中定义的设计系统。

  • 实践步骤

    1. 定义CSS变量:在CSS根元素中定义颜色、字体大小和间距等变量。

      :root {--primary-color: #007bff;--secondary-color: #6c757d;--font-size-normal: 16px;--spacing-unit: 8px;
      }
      
    2. 使用CSS变量:在项目的CSS文件中使用这些变量,确保样式的一致性。

    3. 更新Style Guide:将CSS变量的使用加入到Style Guide中,作为设计系统的一部分。

通过在项目中积极使用CSS Linters和遵循精心制定的Style Guides,你可以显著提高团队的协作效率,减少样式相关的错误,同时保持代码的清晰和一致性。这些工具和实践不仅有助于维护大型项目的CSS,还能提升整个开发过程的质量和愉悦度。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/678093.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【pip】本地和Anaconda的pip冲突时如何指定安装位置

输入指令&#xff1a; where pip 显示如下&#xff1a; D:\LenovoSoftstore\Anaconda\Scripts\pip.exe C:\python\python3.8\Scripts\pip.exe 可以看到有两个位置的pip&#xff0c;一个Anaconda下的pip&#xff0c;一个是本地的pip。 当我们使用pip安装的时候&#xff0c;系…

day37 闭包、变量提升

目录 闭包变量提升函数提升 闭包 闭包&#xff08;closure&#xff09;是一个函数以及其捆绑的周边环境状态&#xff08;lexical environment&#xff0c;词法环境&#xff09;的引用的组合。换而言之&#xff0c;闭包让开发者可以从内部函数访问外部函数的作用域。在 JavaScr…

深入了解 MySQL 数值型函数

引言: 在 MySQL 数据库中,数值型函数是处理和操作数值类型数据的重要工具。这些函数涵盖了多种数学运算和常用的数值处理需求。本文将深入介绍一些常用的 MySQL 数值型函数,并通过具体案例演示它们的使用。 创建测试表: 为了方便演示,我们首先创建一个名为 numeric_tab…

第67讲自定义icon实现

element-plus内置有一些常用的icon供我们使用&#xff0c;但是我们假如需要用自己的icon时候&#xff0c;我们可以搞一个icon自定义组件&#xff1b; 先把icons文件放到src下&#xff1b; 再新建一个SvgIcon组件&#xff1b; index.vue <template><svg class"…

1.4 Binance_interface API U本位合约行情

Binance_interface API U本位合约行情 Github地址PyTed量化交易研究院 1. API U本位合约行情接口总览 方法解释Pathget_ping测试服务器连通性 PING/fapi/v1/pingget_time获取服务器时间/fapi/v1/timeget_exchangeInfo获取交易规则和交易对/fapi/v1/exchangeInfoget_depth深度…

STL之priority_queue的使用及其模拟实现+仿函数

STL之priority_queue的使用及其模拟实现仿函数 1.priority_queue的介绍2.priority_queue的使用3.priority_queue的模拟实现3.1解析细节3.2仿函数3.3具体实现 1.priority_queue的介绍 优先队列是一种容器适配器&#xff0c;根据严格的弱排序标准&#xff0c;它的第一个元素总是…

springboot/ssm学生请假管理系统 高校请假审批管理系统Java系统

springboot/ssm学生请假管理系统 高校请假审批管理系统Java系统 开发语言&#xff1a;Java 框架&#xff1a;springboot&#xff08;可改ssm&#xff09; vue JDK版本&#xff1a;JDK1.8&#xff08;或11&#xff09; 服务器&#xff1a;tomcat 数据库&#xff1a;mysql 5…

C语言:整形存储

#include<stdio.h> int main() {char a -1;signed char b -1;unsigned char c -1;printf("a%d,b%d,c%d", a, b, c);return 0; } b与a都是有符号数结果一样。a的signed相当于省略了。 运行结果 整形提升&#xff1a;整形算术运算总是以至少以缺省整型类型的精…

Hive正则表达式

Hive版本&#xff1a;hive-3.1.2 一、Hive的正则表达式概述 正则表达式是一种用于匹配和操作文本的强大工具&#xff0c;它是由一系列字符和特殊字符组成的模式&#xff0c;用于描述要匹配的文本模式。 Hive的正则表达式灵活使用解决HQL开发过程中的很多问题&#xff0c;本篇文…

AI-数学-高中-25-三角函数一三角函数对称性

原作者视频&#xff1a;【三角函数】【考点精华】3三角函数对称性&#xff08;重要&#xff09;&#xff08;中档&#xff09;_哔哩哔哩_bilibili 1.一个对称点\直线思路&#xff1a; 2.关于两点或两直线对称&#xff1a; 3.两个对称&#xff1a;一个关于点对称、一个关于直线…

数学实验第三版(主编:李继成 赵小艳)课后练习答案(八)(3)

实验八&#xff1a;近似计算 练习三 1. 按要求完成下面的任务&#xff1a; (1)求出函数 处的泰勒展开式&#xff0c;由此计算无理数e的近似值&#xff1b; clc;clear; f(x)exp(-x^2); syms x yf(x); y1matlabFunction(taylor(y,order,20)); 1/y1(1)ans 2.718283693893450 …

MYSQL performance schema详解

文章目录 MYSQL performance schema详解0、performance_schema的介绍1、performance schema入门2、performance_schema表的分类3、performance_schema的简单配置与使用4、常用配置项的参数说明5、重要配置表的相关说明6、performance_schema实践操作MYSQL performance schema详…

智能时代:创新创业的新机遇与挑战

智能时代为创新创业提供了广阔的空间和无限的可能性。以下是一些可能适合智能时代背景的创新创业方向&#xff1a; 人工智能技术应用&#xff1a;人工智能技术是当前科技领域最热门的技术之一&#xff0c;其应用范围不断扩大。创业者可以将人工智能技术应用于各个领域&#xf…

libgflags.a(gflags.cc.o): relocation R_AARCH64_ADR_PREL_PG_HI21

这个问题的解决废了好大功夫&#xff0c;最后google很多论坛才找到方法&#xff0c;特此记录&#xff0c;给大家节省时间 完整版本报错&#xff1a; /usr/bin/ld: /usr/local/lib/libgflags.a(gflags.cc.o): relocation R_AARCH64_ADR_PREL_PG_HI21 against symbol _ZN22gfla…

Android java基础_类的封装

一.面向对象编程的引入 写一个简单的程序输出张三&#xff0c;李四的名字 class Person {String name;String getName() {return "guangdong "name;} };public class Oop {public static void main(String args[]) {Person p1 new Person();p1.name "zhangs…

让Python遇上Office--从编程入门到自动化办公实践

最近仔细的学习了这本《让Python遇上Office》的书&#xff0c;同时把我的学习进程与心得录制了同步视频。 到今天终于把全部90集完成&#xff0c;并且上传到下面的视频平台了&#xff0c;欢迎大家观看并指正&#xff01; 西瓜视频&#xff1a;https://www.ixigua.com/7300628…

洛谷p4391 无限传输

考察字符串周期的题 题目链接 结论 要求字串 s s s的最短循环字串长就是&#xff1a; a n s n − p m t [ n ] ansn-pmt[n] ansn−pmt[n] 证明如下&#xff1a; 这是最大的前缀和后缀 现在我们做如下操作&#xff1a; 补全字段 a a a和字段 b b b&#xff0c;按子段 a a a的…

【数据结构】二叉树的顺序结构及链式结构

目录 1.树的概念及结构 1.1树的概念 1.2树的相关概念 ​编辑 1.3树的表示 1.4树在实际中的运用&#xff08;表示文件系统的目录树结构&#xff09; 2.二叉树概念及结构 2.1二叉树的概念 2.2现实中的二叉树 ​编辑 2.3特殊的二叉树 2.4二叉树的性质 2.5二叉树的存储结…

从信息隐藏到功能隐藏

本文主要记录复旦大学张新鹏教授于2022年12月在第三届CSIG中国媒体取证与安全大会上的汇报

假期刷题打卡--Day29

1、MT1224棋盘 求一个N*N棋盘中的方块总数。 格式 输入格式&#xff1a; 输入整型N 输出格式&#xff1a; 输出整型 样例 1 输入&#xff1a; 2输出&#xff1a; 5备注 考虑到取值范围&#xff0c;可用long整型定义变量 分析过程 这个题目的意思是&#xff0c;在这…