# 主题最佳实践概述

> Shoplazza 总结的主题开发最佳实践，涵盖 section 与 block、性能、图片、国际化、无障碍、配色系统与 JS / CSS 标签。

为了优化您的 theme 开发体验，Shoplazza 制定了一套最佳实践，供您在开发 theme 以及搭建工具链和工作流程时参考。

## 设计与编写 theme

为了打造最佳的客户体验，同时保持商家店铺的速度、可访问性和可发现性，您需要综合考虑多方面因素。在构建 [Nova 2023](/zh-CN/docs/theme/developer-tools/nova-2023) 的过程中，Shoplazza 开发者总结出了一系列设计和构建优化 theme 的原则与最佳实践，供您参考：

- [Sections 和 blocks](/zh-CN/docs/theme/best-practices/sections-and-blocks): 您可以利用 Shoplazza theme 架构创建模块化、高度可定制的 theme，帮助商家实现其业务目标。了解将 theme template 拆分为 section 和 block 时的注意事项，以及如何决定 theme 组件的粒度划分。
- [性能](/zh-CN/docs/theme/best-practices/performance): 性能是您所支持的商家成功与否以及其客户体验质量的关键因素。了解如何优化和测试 theme 的性能。
- [预览检查器](/zh-CN/docs/theme/best-practices/preview-inspector): 预览检查器允许您直接在预览界面中浏览 section 和 block。了解确保轮廓线正确显示的设计规范。
- [图片优化](/zh-CN/docs/theme/best-practices/image-optimization): 了解如何提供尺寸合适的图片、避免布局偏移，以及懒加载首屏外的图片。
- [国际化](/zh-CN/docs/theme/best-practices/internationalization): 了解如何让 theme 可翻译、可感知语言区域，并支持从右到左的语言。
- [无障碍](/zh-CN/docs/theme/best-practices/accessibility): 了解如何构建可配合键盘、屏幕阅读器及其他辅助技术使用的 theme。
- [配色系统](/zh-CN/docs/theme/best-practices/color-system): 用 color 设置和 CSS 变量搭建可复用的配色系统，让商家在主题编辑器里统一给整个店面换色。
- [JS / CSS 标签](/zh-CN/docs/theme/best-practices/javascript-and-stylesheet-tags): 正确使用 stylesheet_tag、script_tag 以及 section 级的 stylesheet 和 javascript 标签，避免脚本阻塞渲染，并把体积压下来。