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

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

相关文章

Java中调用数据库存储过程的示例代码

《Java中调用数据库存储过程的示例代码》本文介绍Java通过JDBC调用数据库存储过程的方法,涵盖参数类型、执行步骤及数据库差异,需注意异常处理与资源管理,以优化性能并实现复杂业务逻辑,感兴趣的朋友... 目录一、存储过程概述二、Java调用存储过程的基本javascript步骤三、Java调用存储过程示

Visual Studio 2022 编译C++20代码的图文步骤

《VisualStudio2022编译C++20代码的图文步骤》在VisualStudio中启用C++20import功能,需设置语言标准为ISOC++20,开启扫描源查找模块依赖及实验性标... 默认创建Visual Studio桌面控制台项目代码包含C++20的import方法。右键项目的属性:

MySQL数据库的内嵌函数和联合查询实例代码

《MySQL数据库的内嵌函数和联合查询实例代码》联合查询是一种将多个查询结果组合在一起的方法,通常使用UNION、UNIONALL、INTERSECT和EXCEPT关键字,下面:本文主要介绍MyS... 目录一.数据库的内嵌函数1.1聚合函数COUNT([DISTINCT] expr)SUM([DISTIN

Java实现自定义table宽高的示例代码

《Java实现自定义table宽高的示例代码》在桌面应用、管理系统乃至报表工具中,表格(JTable)作为最常用的数据展示组件,不仅承载对数据的增删改查,还需要配合布局与视觉需求,而JavaSwing... 目录一、项目背景详细介绍二、项目需求详细介绍三、相关技术详细介绍四、实现思路详细介绍五、完整实现代码

Go语言代码格式化的技巧分享

《Go语言代码格式化的技巧分享》在Go语言的开发过程中,代码格式化是一个看似细微却至关重要的环节,良好的代码格式化不仅能提升代码的可读性,还能促进团队协作,减少因代码风格差异引发的问题,Go在代码格式... 目录一、Go 语言代码格式化的重要性二、Go 语言代码格式化工具:gofmt 与 go fmt(一)

HTML5实现的移动端购物车自动结算功能示例代码

《HTML5实现的移动端购物车自动结算功能示例代码》本文介绍HTML5实现移动端购物车自动结算,通过WebStorage、事件监听、DOM操作等技术,确保实时更新与数据同步,优化性能及无障碍性,提升用... 目录1. 移动端购物车自动结算概述2. 数据存储与状态保存机制2.1 浏览器端的数据存储方式2.1.

基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

《基于HTML5Canvas实现图片旋转与下载功能(完整代码展示)》本文将深入剖析一段基于HTML5Canvas的代码,该代码实现了图片的旋转(90度和180度)以及旋转后图片的下载... 目录一、引言二、html 结构分析三、css 样式分析四、JavaScript 功能实现一、引言在 Web 开发中,

Python如何去除图片干扰代码示例

《Python如何去除图片干扰代码示例》图片降噪是一个广泛应用于图像处理的技术,可以提高图像质量和相关应用的效果,:本文主要介绍Python如何去除图片干扰的相关资料,文中通过代码介绍的非常详细,... 目录一、噪声去除1. 高斯噪声(像素值正态分布扰动)2. 椒盐噪声(随机黑白像素点)3. 复杂噪声(如伪

Java Spring ApplicationEvent 代码示例解析

《JavaSpringApplicationEvent代码示例解析》本文解析了Spring事件机制,涵盖核心概念(发布-订阅/观察者模式)、代码实现(事件定义、发布、监听)及高级应用(异步处理、... 目录一、Spring 事件机制核心概念1. 事件驱动架构模型2. 核心组件二、代码示例解析1. 事件定义

Python实例题之pygame开发打飞机游戏实例代码

《Python实例题之pygame开发打飞机游戏实例代码》对于python的学习者,能够写出一个飞机大战的程序代码,是不是感觉到非常的开心,:本文主要介绍Python实例题之pygame开发打飞机... 目录题目pygame-aircraft-game使用 Pygame 开发的打飞机游戏脚本代码解释初始化部