美文网首页程序员让前端飞
可扩展、模块化CSS--主题样式规则(翻译文)

可扩展、模块化CSS--主题样式规则(翻译文)

作者: 拿着号码牌徘徊 | 来源:发表于2018-02-06 21:23 被阅读86次
    SMACSS is becoming one of the most useful contributions to front-end discussions in years

    很多项目可能并不需要主题这个样式,因为并不是样式的核心。然而一些网站是需要的,比如雅虎邮箱。

    主题

    把主题定义为网站或者APP需要看的颜色和图也许是很自然的。所以单独的把主题分开来进行选择和使用是很好的。
    主题会影响原始布局,和默认样式一样的渲染页面,并且它覆盖基本颜色。改变基本颜色,改变整个感官。
    现在假如说你有一个对话模块,它需要一个蓝色边框。模块本身初始会有一个边框样式,主题定义它的颜色。

    .mod {
        border: 1px solid;
    }
    
    // in theme.css
    .mod {
        border-color: blue;
    }
    

    主题可以有类名,它清晰的指出,元素应该是怎么样的。只要我们把主题分离的够好就会更多样。像雅虎邮箱就有超过50种主题文件来综合各种想要的颜色和图片。

    排印

    最后但不是最重要的,有一个字体样式,类似于主题。有些时候你需要大范围的重新定义正在使用的字体并且国际化等。中国和韩国等地区复杂的表意文字,是难以阅读小字体大小。因此,我们为每个地区创建单独的字体文件,重新定义这些组件的字体大小。字体规则通常会影响基础模块和风格。字体样式通常不会被指定在布局层次布局用于定位和布局,风格变化不像字体和颜色。像主题文件,可能没有实际需要定义字体类(如f-large)。你的网站应该只有3到6不同的字体。如果你有超过6字体大小宣布在您的项目中,您的用户可能不会注意到你的网站,也更难维护。

    原文地址:https://smacss.com/

    相关文章

      网友评论

        本文标题:可扩展、模块化CSS--主题样式规则(翻译文)

        本文链接:https://www.haomeiwen.com/subject/vjrnzxtx.html