SMACSS是一种由Jonathan Snook提出的CSS架构方法论，通过将样式规则划分为基础规则、布局规则、模块规则、状态规则和主题规则五大类别来提升代码的可维护性和扩展性 基础规则定义HTML元素的默认样式，仅使用元素选择器 布局规则描述页面大尺度结构，建议使用l-前缀 模块规则针对可复用组件，采用类似BEM的命名约定 状态规则描述特定状态下的样式变化，常用is-前缀 主题规则定义视觉主题，推荐theme-前缀 文章还介绍了按类别分文件组织的实践方式，与预处理器结合的技巧，响应式设计策略以及性能优化建议，强调通过清晰的分类和命名约定构建可扩展的CSS架构

OOCSS是一种模块化的CSS设计方法论其核心思想是通过分离结构和皮肤实现样式复用结构定义布局属性皮肤控制视觉效果同时强调容器与内容分离避免样式与DOM结构深度耦合提倡抽象重复模式为基类并通过扩展类实现差异化采用命名空间约定区分对象类型保持组件样式上下文独立性使用相对单位控制尺寸通过状态类管理动态变化利用CSS变量实现主题切换移动优先处理响应式设计最后通过简化选择器合并属性等方式优化性能这套方法论有效提升代码复用率和可维护性

BEM命名方法论是一种前端CSS命名规范由Yandex团队提出旨在解决样式冲突和污染问题它将界面分解为独立块块中包含元素并通过修饰符描述状态或变体块命名应简洁使用单个或连字符连接的单词元素通过双下划线连接块名不能独立存在修饰符通过双连字符定义变化BEM在大型项目中提供样式隔离和可维护性优势能与预处理器如Sass结合使用文章详细说明了正确命名规则常见错误及实际应用案例包括在ReactVue等框架中的实现同时探讨了BEM变体和性能考量为团队协作提供统一命名规范

CSS预处理器通过编译器将特殊语法转换为标准CSS核心流程包括词法分析语法解析代码生成三个阶段主流预处理器如SassLessStylus各有特点Sass支持变量嵌套规则模块化Less支持实时编译懒加载变量Stylus语法灵活构建工具如Webpack可集成预处理器PostCSS常配合使用高级技巧包括自定义函数条件编译源映射生成性能优化涉及增量编译缓存机制选择性导入跨预处理器兼容方案包括共享变量通用混合宏调试与错误处理涵盖语法错误定位编译警告处理性能分析报告

模块化CSS通过将代码分解为独立可复用单元解决传统全局CSS的命名冲突和样式污染问题主要方法包括BEM命名规范CSS Modules技术和原子化CSS如TailwindCSS合理的文件组织结构按功能划分目录与设计系统集成使用变量定义设计token现代构建工具如Webpack支持模块化配置需关注代码分割和关键CSS提取等性能优化跨团队协作需要建立命名约定变量管理等规范测试策略包含视觉回归和样式检查已有项目可渐进式迁移需处理浏览器兼容性模块化CSS与CSSinJS各有特点可融入设计到开发工作流结合状态管理实现动态样式完善的文档应包括变量目录和组件API关注CSS性能指标如文件大小和选择器复杂度整合可访问性要点如焦点状态和高对比度支持

CSS中的条件语句与循环通过预处理器如Sass和Less实现动态样式逻辑提升可维护性CSS原生通过媒体查询和特性查询实现基础条件判断自定义属性结合calc实现简单条件Sass提供完整条件语句Less通过带条件混合实现逻辑判断Sass支持三种循环结构用于生成样式类实战案例展示响应式间距工具类和动态主题切换的实现性能优化建议避免深层嵌套控制循环生成类名数量预处理循环不影响运行时性能合并条件分支减少代码量浏览器兼容方案为旧浏览器提供降级处理结合条件语句确保兼容性

语义化HTML是通过合适的标签描述内容含义而非仅表现样式的核心概念它强调使用具有明确含义的HTML标签构建页面结构如article表示独立内容区块nav表示导航链接语义化文档结构对开发者友好能提升可访问性SEO效果及代码可维护性优势包括帮助屏幕阅读器理解内容优化搜索引擎排名以及使代码更易维护常用语义化标签有header main footer article section等实践中需避免过度使用divspan误用标题标签等误区现代开发中需注意动态内容加载和CSSinJS对语义化的影响Web组件也应遵循语义化原则通过role属性或扩展原生元素保持结构清晰性

HTML中的id和class属性是用于标识元素的重要全局属性id用于指定唯一标识符而class用于指定类名id在整个文档中必须唯一class可重复使用且一个元素可有多个类名id常用于页面锚点CSS样式挂钩和JavaScript操作目标class则用于共享样式状态标记和JavaScript选择一组元素id命名需以字母开头可包含特定字符且区分大小写class命名应简洁有描述性推荐使用连字符分隔实际开发中应根据需求选择id或classid适合唯一元素class适合复用样式或行为高级应用中可与CSS选择器组合使用或在JavaScript框架中发挥作用性能上id选择器最高效class选择器也不错常见错误包括重复id过度依赖id和无意义类名最佳实践包括语义化命名使用命名约定如BEM和考虑可维护性实际案例展示了导航菜单和表单验证的实现响应式设计和可访问性中也广泛应用id和class属性

HTML中的div和span是两种基础容器元素但特性不同div作为块级元素独占一行可设置宽高常用于布局结构分组如页面区域划分卡片布局等span是内联元素不换行宽高由内容决定主要用于文本标记如高亮部分文字添加特殊样式两者默认显示方式不同div为blockspan为inline但可通过CSS改变现代布局中div常作为响应式容器span用于调整文本显示虽然都是轻量级元素但大量使用时需注意性能HTML5提供了更多语义化元素可在某些场景替代div实际项目中div常用于构建组件如卡片而span多用于文本装饰通过ARIA属性可增强两者的可访问性合理使用div和span能创建结构清晰性能良好的网页

HTML文档中字符集声明至关重要它确保浏览器正确解析显示文本避免乱码问题HTML5推荐使用meta标签charset属性声明UTF8编码并置于head部分最前端常见编码包括UTF8ISO88591GB2312等历史上有HTML4和XHTML声明方式但HTML5更简洁字符集还可通过HTTP头设置优先级更高多语言网站首选UTF8需确保文件保存编码数据库连接表单提交等环节统一使用UTF8编辑器应默认保存为UTF8编码移动端开发需考虑视口设置响应式设计国际化网站应配合lang属性使用测试可通过开发者工具验证工具进行字符集声明需与CSSTJavaScript服务器端技术协调工作了解其历史演变有助于处理遗留系统问题