#047:构建投票模块,第一部分

CSS-Tricks 上有着悠久的投票传统。它们很有趣,能收集到重要的数据,并增强人们与网站的联系。互动至上!

我们从 v9 网站的实时版本中获取一些标记来使用。我们调整了一些间距,使模块的外观更符合其类型。例如,我们减少了侧边栏模块的填充量,并且完全去除了图片广告的填充。

我们的投票选项以列表形式标记,这很有道理,但也带来了一些不需要的样式。因此,我们重新调整了应用列表样式的方式和位置。我们花费了大量时间调整小的排版细节,使投票选项看起来不错且易于互动。我们还修复了一些按钮问题,特别是防止它们在单词之间断开,并使悬停颜色保持一致,无论“button”类名应用于哪个元素。

我们将模块样式拆分到它自己的 SCSS 文件中,这样当我们进行模块特定的样式设置时,可以直接跳转到该文件。全局文件变得太大,这总是表明拆分是一个好主意,可以让我们保持理智。