从Stylus预处理器到LocalStorage实践：构建一个优雅的TAPAS清单应用

爱编程的喵
76 阅读4分钟

前言

在前端开发中，我们经常需要处理样式预处理和数据持久化的问题。本文将通过一个实际的TAPAS清单应用，深入探讨Stylus预处理器的使用技巧和LocalStorage的最佳实践。

📋 项目概览

我们要构建的是一个本地TAPAS（西班牙小食）清单应用，用户可以添加、管理自己喜欢的小食清单。这个项目将涵盖：

  • 🎨 Stylus预处理器的高级用法
  • 💾 LocalStorage数据持久化
  • 📱 响应式设计与移动端适配
  • ⚡ 现代CSS布局技巧

成果展示

image.png

🎨 Stylus：让CSS开发更优雅

什么是Stylus？

Stylus是一个强大的CSS预处理器，它让我们能够用更简洁、更富表现力的语法来编写样式。

全局安装Stylus：

npm install -g stylus
stylus --version

Stylus的核心优势

  1. 简洁的语法：省略分号和花括号
  2. 变量支持：可重用的样式值
  3. 嵌套规则：更直观的结构组织
  4. 模块化：像JavaScript一样的模块特性

Stylus用法

先创建例如 common.styl 和 common.css 文件，后在终端输入以下命令，就可以通过 common.styl 对 common.css 进行编译

stylus -w common.styl -o common.css

让我们看看实际的Stylus代码：

$background_color = rgba(123,255,255,0.95)

html
  box-sizing border-box
  min-height 100vh
  display flex
  flex-direction column
  justify-content center
  align-items center
  text-align center
  background url('http://wes.io/hx9M/oh-la-la.jpg') center no-repeat
  background-size cover

*
  box-sizing border-box

.wrapper
  padding 20px
  min-width 350px
  background $background_color
  box-shadow 0 0 0px 10px rgba(0, 0, 0, 0.1)
  h2
    text-align center
    margin 0
    font-weight 200

.plates
  margin 0
  padding 0
  text-align left
  list-style-type none
  li
    border-bottom 1px solid rgba(0, 0, 0, 0.2)
    padding 10px 0px
    display flex
  label
    flex 1
    cursor pointer
  input
    display none

.add-items
  margin-top 20px
  input
    padding 10px
    outline 0
    border 1px solid rgba(0, 0, 0, 0.1)

编译后的CSS代码：

html {
  box-sizing: border-box;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: url("http://wes.io/hx9M/oh-la-la.jpg") center no-repeat;
  background-size: cover;
}
* {
  box-sizing: border-box;
}
.wrapper {
  padding: 20px;
  min-width: 350px;
  background: rgba(123,255,255,0.95);
  box-shadow: 0 0 0px 10px rgba(0,0,0,0.1);
}
.wrapper h2 {
  text-align: center;
  margin: 0;
  font-weight: 200;
}
.plates {
  margin: 0;
  padding: 0;
  text-align: left;
  list-style-type: none;
}
.plates li {
  border-bottom: 1px solid rgba(0,0,0,0.2);
  padding: 10px 0px;
  display: flex;
}
.plates label {
  flex: 1;
  cursor: pointer;
}
.plates input {
  display: none;
}
.add-items {
  margin-top: 20px;
}
.add-items input {
  padding: 10px;
  outline: 0;
  border: 1px solid rgba(0,0,0,0.1);
}

🔍 关键技术点解析

1. 变量的力量

$background_color = rgba(123,255,255,0.95)

通过变量，我们可以轻松管理主题色彩，实现一处修改，全局更新。

2. 嵌套的优雅

.wrapper
  padding 20px
  h2
    text-align center
    margin 0

嵌套语法让CSS结构更清晰，维护更简单。

3. background-size的妙用

  • cover：等比例缩放并裁剪，重点在容器适配
  • contain：完整显示背景图片，重点在图片完整性

🏗️ HTML结构设计

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover">
    <title>Local TAPAS</title>
    <link rel="stylesheet" href="./common.css">
</head>
<body>
    <div class="wrapper">
        <h2>Local TAPAS</h2>
        <p>请添加您的TAPAS</p>
        <ul class="plates">
            <li class="plates">loading Tapas...</li>
        </ul>
        <form class="add-items">
            <input 
                type="text" 
                placeholder="添加您的TAPAS"
                required
                name="item"
            >
            <input type="submit" value="添加">
        </form>
    </div>
    <script src="./common.js"></script>
</body>
</html>

📱 移动端适配要点

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover">
  • user-scalable=no：禁止用户缩放，确保设计一致性
  • viewport-fit=cover：适配刘海屏等特殊屏幕

💻 JavaScript交互逻辑

当前的JavaScript基础结构：

const addItems = document.querySelector('.add-items');// form
const itemsList = document.querySelector('.plates');// 列表

function addItem(e){
    e.preventDefault();
    // 这里将实现添加逻辑和LocalStorage存储
}

addItems.addEventListener('submit',addItem);

🎯 CSS布局技巧深度解析

Flexbox居中布局

html {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

这个布局实现了完美的垂直水平居中，适用于各种屏幕尺寸。

盒模型统一

* {
  box-sizing: border-box;
}

使用border-box模型，让宽度计算更直观，避免padding和border导致的布局问题。

视觉层次与阴影效果

.wrapper {
  background: rgba(123,255,255,0.95);
  box-shadow: 0 0 0px 10px rgba(0,0,0,0.1);
}
  • 半透明背景营造层次感
  • box-shadow创建立体视觉效果

🔧 布局测试与调试

项目中还包含了一个布局测试文件：

<div class="container flex">
    <div class="box">第1个盒子</div><div class="box">第2个盒子</div>
</div>

.box{
    box-sizing: border-box;
    display: inline-block;
    width: 50%;
    border: 1px solid red;
    padding: 5px;
}

这展示了inline-block布局的经典用法，两个50%宽度的盒子实现并排布局。

🚀 性能优化建议

  1. CSS继承优化

    • 合理利用CSS继承减少重复声明
    • 在父元素设置通用样式

  2. 选择器优化

    • 避免过深的嵌套选择器
    • 使用类选择器而非标签选择器

  3. 资源加载优化

    • 压缩CSS文件
    • 使用CDN加速背景图片加载

📈 下一步扩展方向

  1. 完善LocalStorage功能

    • 实现数据的增删改查
    • 添加数据验证和错误处理

  2. 增强用户体验

    • 添加动画过渡效果
    • 实现拖拽排序功能

  3. PWA化改造

    • 添加Service Worker
    • 实现离线访问能力

🎉 总结

通过这个TAPAS清单应用的开发，我们深入学习了：

  • ✅ Stylus预处理器的实际应用
  • ✅ 现代CSS布局技巧
  • ✅ 响应式设计最佳实践
  • ✅ 前端项目的结构组织

Stylus作为CSS的超集，让我们能够以更优雅的方式组织样式代码。结合LocalStorage的数据持久化能力，我们可以构建出既美观又实用的前端应用。

avatar
文章
阅读
粉丝