如何编写复用性、可读性和可维护性的代码

2024-02-25 17:48

本文主要是介绍如何编写复用性、可读性和可维护性的代码,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

- 平时我们在写HTML、CSS时会为类的命名耗费脑汁,本文总结了一下平时编码的心得

CSS结构化组织思想

  • 目的是讲用户界面划分为独立的块,即使使用复杂的UI,这也使界面开发变得简单快捷,并且允许重复使用现有的代码,而无需复制和粘贴。
  • CSS(块+元素+修饰符)

所谓的“块”其实就是该DOM元素共有的最基本的特性,在其命名上我们可以采取按照其目的来取名(btn或者search-form),而不是按状态(red或者big)

<div class="error"></div>

<div class="red-text"></div>

  • 该块不应影响其环境,这意味着您不应设置块的外部几何(边距)或定位。

也就是说这样可以保证其复用性比较高

元素

块的复合部分,不能与其分开使用。同理其在命名上面依赖于块的衍生(item或者text)
你可以按类似这样的取名方式(块名称__元素名称

<form class="search-form">

      <input class="search-form__input"><button class="search-form__button">Search</button>

</form>

修饰符

定义块或元素的外观,状态或行为的实体。
修饰符具有描述其外观(“多大?”或者“哪个主题?”等等- size_s或theme_islands)其状态(“它与其他人有什么不同?” - disabled,focused等),其行为(“它是否有行为?“或”它如何响应用户?“ - 例如directions_left-top)。
修饰符名称通过单个下划线(_)与块或元素名称分隔开。

<form class="search-form search-form_focused">

    <input class="search-form__input"><button class="search-form__button search-form__button_disabled">Search</button>

</form>

你可以在修饰符中添加键值来达到具体描述,从而达到可读,以便在后期维护时易于更改 (修饰符名称_键值)

<button class="search-form__button search-form__button_size_s search-form__button_size_m">

有了上述思考方式后我们可以将其应用到我们的项目文件结构中去

单个块对应于单个目录。
块和目录具有相同的名称。例如,该header块在header/目录中,该menu块在该menu/目录中。
块的实现分为单独的技术文件。例如,header.css和header.js。
块目录是其元素和修饰符的子目录的根目录。
元素目录的名称以双下划线(__)开头。例如,header/__logo/和menu/__item/。
修饰符名称的名称以单个下划线(_)开头。例如,header/_fixed/和menu/_theme_islands/。
元素和修饰符的实现分为单独的技术文件。例如,header__input.js和header_theme_islands.css。

css结构化、图片来自网络侵权删
CSS结构化参考 : BEM OOCSS SMACSS

本仅仅是提供思路,欢迎拍砖

这篇关于如何编写复用性、可读性和可维护性的代码的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/746219

相关文章

springboot循环依赖问题案例代码及解决办法

《springboot循环依赖问题案例代码及解决办法》在SpringBoot中,如果两个或多个Bean之间存在循环依赖(即BeanA依赖BeanB,而BeanB又依赖BeanA),会导致Spring的... 目录1. 什么是循环依赖?2. 循环依赖的场景案例3. 解决循环依赖的常见方法方法 1:使用 @La

使用C#代码在PDF文档中添加、删除和替换图片

《使用C#代码在PDF文档中添加、删除和替换图片》在当今数字化文档处理场景中,动态操作PDF文档中的图像已成为企业级应用开发的核心需求之一,本文将介绍如何在.NET平台使用C#代码在PDF文档中添加、... 目录引言用C#添加图片到PDF文档用C#删除PDF文档中的图片用C#替换PDF文档中的图片引言在当

C#使用SQLite进行大数据量高效处理的代码示例

《C#使用SQLite进行大数据量高效处理的代码示例》在软件开发中,高效处理大数据量是一个常见且具有挑战性的任务,SQLite因其零配置、嵌入式、跨平台的特性,成为许多开发者的首选数据库,本文将深入探... 目录前言准备工作数据实体核心技术批量插入:从乌龟到猎豹的蜕变分页查询:加载百万数据异步处理:拒绝界面

用js控制视频播放进度基本示例代码

《用js控制视频播放进度基本示例代码》写前端的时候,很多的时候是需要支持要网页视频播放的功能,下面这篇文章主要给大家介绍了关于用js控制视频播放进度的相关资料,文中通过代码介绍的非常详细,需要的朋友可... 目录前言html部分:JavaScript部分:注意:总结前言在javascript中控制视频播放

Spring Boot 3.4.3 基于 Spring WebFlux 实现 SSE 功能(代码示例)

《SpringBoot3.4.3基于SpringWebFlux实现SSE功能(代码示例)》SpringBoot3.4.3结合SpringWebFlux实现SSE功能,为实时数据推送提供... 目录1. SSE 简介1.1 什么是 SSE?1.2 SSE 的优点1.3 适用场景2. Spring WebFlu

java之Objects.nonNull用法代码解读

《java之Objects.nonNull用法代码解读》:本文主要介绍java之Objects.nonNull用法代码,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录Java之Objects.nonwww.chinasem.cnNull用法代码Objects.nonN

SpringBoot实现MD5加盐算法的示例代码

《SpringBoot实现MD5加盐算法的示例代码》加盐算法是一种用于增强密码安全性的技术,本文主要介绍了SpringBoot实现MD5加盐算法的示例代码,文中通过示例代码介绍的非常详细,对大家的学习... 目录一、什么是加盐算法二、如何实现加盐算法2.1 加盐算法代码实现2.2 注册页面中进行密码加盐2.

python+opencv处理颜色之将目标颜色转换实例代码

《python+opencv处理颜色之将目标颜色转换实例代码》OpenCV是一个的跨平台计算机视觉库,可以运行在Linux、Windows和MacOS操作系统上,:本文主要介绍python+ope... 目录下面是代码+ 效果 + 解释转HSV: 关于颜色总是要转HSV的掩膜再标注总结 目标:将红色的部分滤

在C#中调用Python代码的两种实现方式

《在C#中调用Python代码的两种实现方式》:本文主要介绍在C#中调用Python代码的两种实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录C#调用python代码的方式1. 使用 Python.NET2. 使用外部进程调用 Python 脚本总结C#调

Java时间轮调度算法的代码实现

《Java时间轮调度算法的代码实现》时间轮是一种高效的定时调度算法,主要用于管理延时任务或周期性任务,它通过一个环形数组(时间轮)和指针来实现,将大量定时任务分摊到固定的时间槽中,极大地降低了时间复杂... 目录1、简述2、时间轮的原理3. 时间轮的实现步骤3.1 定义时间槽3.2 定义时间轮3.3 使用时