新设计人网[www.sjidea.com],努力打造为新设计服务综合资讯第一网!
全新域名:[www.sjidea.com]

新设计人资源网

首页
  • 资讯
    • 设计竞赛
    • 设计会展
    • 院校连线
    • 综合其他
  • 理论
    • 设计论文
    • 设计随笔
    • 设计对话
    • 竞赛传真
    • 院校展示
  • 教程
    • PS专题
    • C4D教程
    • Illustrator
    • Corldraw
    • Indesign
    • 网页设计
  • 作品
    • 标志设计
    • 招贴设计
    • 包装设计
    • 封面设计
    • 时尚设计
    • 理论
    • 人物与团队
  • 素材
    • 矢量素材
    • PSD素材
  • 其他
    • 工业设计
    • 平面设计
    • 环境设计
    • 数位媒体
    • 综合设计
    • 设计相关
  • 软件资源
  • 免费字体
  • 网购领券
  • 本站所有教程、素材

    工业设计

    (30)

    平面设计

    (19)

    环境设计

    (0)

    数位媒体

    (0)

    综合设计

    (1)

    设计相关

    (0)

    CSS教程

    • 首页
    • 资讯
    • 理论
    • 教程
    • 作品
    • 素材
    • 其他
    • 软件资源
    • 免费字体
    教程 > 网页设计 > CSS教程 >
    栏目:全部 PS专题 C4D教程 Illustrator Corldraw Indesign 网页设计

    设计教程

    • ps教程
    • PS画笔
    • PS动作
    • PS样式

    素材下载

    • 矢量素材
    • PSD素材

    手把手教你CSS架构之SMACSS

    www.sjidea.com | CSS教程 | 2022-05-23
    本篇文章给大家带来了关于css架构SMACSS的相关知识,其中会讲到什么是smacss以及该架构分类的相关问题,希望对大家有帮助。

    因为 CSS 只有一个作用域,如果不注意维护 CSS 代码,则会导致我们写的代码难于阅读和维护,于是我们借助网页本身是有层次的,抽象出来了BEM 方法论。

    BEM 简单的三层分法,在应对小中型网站没有问题,但是去应对复杂网站的样式可能就比较困难了,我们需要寻求一个更好的办法。

    于是 SMACSS 横空出世了, SMACSS 和 BEM 的关系有点像布局中的 Flex 布局和 Grid 布局的关系。

    但是请注意, SMACSS 和 BEM 之前绝不是包含和被包含的问题,就像在应用 Flex 布局和 Grid 布局的时候,铺网站结构我们会更多倾向 Grid,普通简单的二维布局则会采用 Flex,我们会在合适的时机采用合适的方法,SMACSS 和 BEM 也差不多,掌握了思想,应用都是小事。

    如果你还没有学过 BEM 可以参考下 CSS 架构之 BEM 这篇文章。

    什么是 SMACSS

    不难想到,SMACSS 是缩写,这个缩写就是网站的开门注 :Scalable and Modular Architecture for CSS,名字的意思很明确就是要编写模块化、结构化和可扩展的 CSS。

    40.png

    当你学完 SMACSS,再来理解 Scalable and Modular Architecture for CSS 体会就更深了。

    SMACSS 应该怎么读,SMACSS 虽然不是一个单词,但是它是有自己的发音的,音同单词 {smacks}。

    SMACSS 的分类

    如果给 BEM 找个核心词,那就是分层,如果给 SMACSS 也找个核心词,那肯定就是分类,一字之差,我们来看看 SMACSS 如何进行分类的。

    SMACSS 的核心是分类,具体把项目的样式分为了五类:

    • Base(基础)

    • Layout(布局)

    • Module(模块)

    • State(状态)

    • Theme(主题)

    接下来我们具体看看五个部分具体的内容。

    Base

    基础(Base)规则里一般放置默认样式。这些默认样式基本上都是元素选择器,不过也可以包含属性选择器,伪类选择器,孩子选择器,兄弟选择器。本质上来说,一个基础样式定义了元素在页面的任何位置应该是怎么样的。

    例如:

    html {
        margin: 0;
        font-family: sans-serif;
    }
    a {
        color: #000;
    }
    button {
        color: #ababab;
        border: 1px solid #f2f2f2;
    }

    我们看到 Base 的代码和 CSS resets 非常的相似。

    这部分的代码一般我们都是寻求 Normalize.css 或 sanitize.css 的帮助,而不需要自己完成。

    Layout

    我们先来区分下网站什么部分属于 Layout 什么部分属于 Module,看看下面这个网站截图:

    01.png

    先来一次大致的划分,主要包括头部、体部、尾部等,这些就是属于 Layout 的。

    再来一次细致的划分,Layout 里面的元素还可以继续细分,例如导航栏等,这些都是组件 Module。

    Layout 很贴近 HTML 标签,作为网站的骨架,负责布局,Module 更多负责业务展示和交互的部分。

    Layout 与 Module 的关系为( > 表示包含):

    Layout > Module

    如果网站复杂,其实是可以这样的:

    > Layout > Module > Layout > Module ...

    所以,布局(Layout)规则就是将页面拆分成几个部分,每个部分都可能有一到多个模块。

    一般布局类名都是 .l- 开头。

    需要注意,官方讲主要的 layout 使用可以使用 ID 选择器,次要的 layout 采用类选择器,对于这个我是绝对不能接受的,我认为应该全用类。

    走个实例:

    02.png

    .l-header {}
    .l-primarynav {}
    .l-main-content {}

    注意,其实现在项目开发,Layout 往往直接被当做组件直接使用了,例如 、

    等组件,然后你可以在他们内部去遵循 Module 规则。

    Module

    看完上一节,Module 就很容易理解了。

    模块(Module) 是我们的设计当中可重用,可模块化的部分。插图,侧边栏,产品列表等等都属于模块。

    Module 从工程化的角度,你叫它 component 也没多大问题。

    走个实例,一个 POST 组件:

    类名很简单,以 moudle-name 或 component—name 作为前缀就行了。

    State

    对于 Module 甚至是 Layout,里面不可避免需要动态交互,比如按钮是不是禁用 disable,布局是不是激活 active,tab 组件是不是展开 expand 等,于是我们需要维护 state 来操作动态变化的部分,这就是第四个部分 State。

    State 的类名,一般使用 .is- 来开头,例如:

    .is-collapsed {}
    .is-expanded {}
    .is-active {}
    .is-highlighted {}
    .is-hidden {}
    .is-shown {}
    .is-successful {}

    Theme

    大家多多少少都用过网站的换肤功能,所以 Theme 也算比较常见的了,整个网站上重复的元素,比如颜色、形状、边框、阴影等规则基本都在 Theme 的管辖下,换句话说 Theme 是定义公共类名的地方。

    大多数情况下,。我们不想每次创建它们时都重新定义它们。相反,我们想要定义一个唯一的类,我们稍后才将其添加到默认元素中。

    .button-large {
        width: 60px;
        height: 60px;
    }

    不要将这些 SMACSS 主题规则与基本规则混淆,因为基本规则仅针对默认外观,并且它们往往类似于重置为默认浏览器设置,而主题单元更像是一种样式,它提供最终外观,这种特定的配色方案是独一无二的。

    如果站点具有多个样式或多个用于不同状态的主题,主题规则也很有用,因此可以在页面上的某些事件期间轻松更改或交换,例如使用主题切换按钮。至少,它们将所有主题样式保存在一个地方,因此您可以轻松更改它们并保持它们井井有条。

    SMACSS 目录

    项目中使用了 SMACSS 的命名规范,目的大概就是这样的:

    03.png

    总结

    因为 CSS 只有一个作用域,会导致代码很混乱,很难阅读,也很难扩展,于是出现了BEM ,但是当项目更加复杂的时候,我们需要一个新的更上一个台阶的样式管理方案,这就是 SMACSS ,不用于 BEM 的分层,它把采用的办法是分类,项目中的样式文件被它分为五类,让我样式管理变得更加的方便了。



    感谢您的阅读标题为 《手把手教你CSS架构之SMACSS》的文章,更多教程内容可关注新设计人网。
    上一篇:css3如何让盒子水平居中
    下一篇:总结整理:需要避坑的五大常见css错误(收藏)

    推荐内容

    • 你必须了解Selenium使用CSS定位总结 2022-05-23
    • 绚丽的极光用CSS也能实现! 2022-05-23
    • css怎么实现图片放大缩小动画 2022-05-23
    • 使用CSS实现一个吃豆人的Loading加载效果 2022-05-23
    • 浅析CSS中怎么实现线性渐变(linear-gradient) 2022-05-23
    • 十分钟教会你仅使用一个div配合css实现饼状图 2022-05-23
    • css3如何让盒子水平居中 2022-05-23
    • css3怎么设置rotate旋转点 2022-05-23
    • css3框模型有几种属性 2022-05-23
    • 总结整理:需要避坑的五大常见css错误(收藏) 2022-05-23

    热点内容

    • css3怎么改首字母颜色 2022-05-22
    • 关于 CSS 变量的一些你可能不了解的事! 2022-05-22
    • 快速提升开发技能的 20 个 CSS 小技巧 2022-05-23
    • css3如何让animation动画停止 2022-05-23
    • 值得收藏的CSS盒子模型属性详解 2022-05-23
    • 要过年了,使用CSS实现一个喜庆的灯笼动画效果! 2022-05-23
    • css怎么实现鼠标移上去旋转效果 2022-05-22
    • 利用纯CSS实现旋转React图标的动画效果 2022-05-23
    • css怎么实现图片放大缩小动画 2022-05-23
    • 使用CSS实现一个吃豆人的Loading加载效果 2022-05-23
    点击这里给我发消息
    教程中心: PS专题 【 Photoshop教程、 PS画笔、 PS动作、 PS样式】 | C4D教程 | Illustrator教程 | Corldraw教程 | Indesign教程 | 网页设计教程

    新设计人网(www.sjidea.com) 网站理念:致力服务新设计人 SJidea!
    免责声明:本站所有资源(文字、图片)搜集整理于互联网或者网友提供,仅供学习与交流使用,如果不小心侵犯到你的权益,请及时联系我们删除该资源。

    Powered by 新设计人联盟 Copyright © 2006 - 2020 新设计人 www.sjidea.com 迅睿CMS框架

    首页 作品 教程 字体
    • 返回上一页
    • 首页网站首页
    • ︿
      TOP
      返回顶部