1. David Wu首页
  2. web前端
  3. HTML

网站制作中的css框架设计

CSS被设计成是一个非常简单和直观的语言。它的基本目的是定义选择目标HTML元素和应用属性给他们。易于掌握并开始应用。对大型复杂项目时,虽然一些CSS功能可能会有点麻烦要处理。 其级联功能,例如,允许属性,以由其他的选择器,根据其上的片材或由顺序重写选择特异性。此外,元素继承父母的DOM属性。如果没有适当的组 WP网站建设

CSS被设计成是一个非常简单和直观的语言。它的基本目的是定义选择目标HTML元素和应用属性给他们。易于掌握并开始应用。对大型复杂项目时,虽然一些CSS功能可能会有点麻烦要处理。

其级联功能,例如,允许属性,以由其他的选择器,根据其上的片材或由顺序重写选择特异性。此外,元素继承父母的DOM属性。如果没有适当的组织,这样可以很快失控和杂乱的。这就是一个架构来帮助。

什么是CSS架构?

一个CSS架构带来推理CSS创作。把它想象成一组指导原则和最佳实践,帮助开发人员编写的代码的可维护性灵活性,大规模更具重用性。我们通过实现这一应用模块化方法促进组织传达的意义我们的代码库。我们将看到如何使用3基本步骤应用这些原则。

模块化是一个核心概念。不仅在代码级,而且对一个设计之一。数码产品已经在过去几年里发展了很多,由于新设备的兴起和响应网络。复杂性已经改变。我们作为开发者和设计者,要支持这个新的场景。网页设计已不再是最好的办法; 我们应该建立设计系统。基于页面的CSS并不适合于建立灵活的,可扩展的产品我们的需求。与可重用的组件工作是要走的路。

上一个CSS结构,模块化可以在几个层次上被应用。这三个基本步骤开始构建你的CSS这种方式是通过:

  1. 打破了代码转换成更小的块和范围将它们分离;
  2. 编码一个独立的封装方式部件;
  3. 根据它们的目的,并与相互关系命名CSS选择。

入门

1.分离和分类代码

为了保持建筑模块化的,它打破了代码转换成更小的部分是很重要的。多个文件使代码更易于阅读,导航和跟踪。要做到这一点,一个CSS预处理器-比如萨斯,LESS或手写笔 -或者后置处理器-比如PostCSS -是要走的路。预处理器增强CSS创作的能力,不断推出新的功能,如变量,混入和更多。要使用单独的文件工作,你的代码将被分为谐音和进口上的文件,将一切编译成一个单一的文件。main.scss.css

 

一个示例main.scss文件。(剧透:它已经归类:P)

现在是时候根据其项目范围进行分类每个代码块。其中第一个方法那里的介绍选择分类是SMACSS。通过SMACSS提出的层是基础布局模块状态主题。ITCSS扩大了这一概念,引入其他层,如设置王牌。MVCSS也有类似的做法,但有不同的命名约定。

厦门网站制作

厦门网站制作

ITCSS层惯例。
https://speakerdeck.com/dafed/managing-css-projects-with-itcss?slide=49

你不必严格遵循这些方法。学习的例子和数字有什么更好的适合你的项目。在我看来,你的分离架构分成设置基地布局组件是一个良好的开端。设置是你的配置文件,如变量(颜色,大小,字体定义…)和助手(函数,混入…)将被保存。该基地层将包含您复位和unclassed HTML规则-的方式默认的或者应该是什么样子,例如。布局存储持有页面上的组件的结构的类-网格和容器,例如。最后,组件:CSS架构和设计系统的核心。<a><input>

2.定义你的组件

我认为组件的CSS架构的核心,因为这其中大部分的代码将生活。它们是构成用户接口的可重复使用的视觉模式 – 按钮,手风琴或模态,例如。

厦门网站制作

厦门网站制作

按钮组件。

每个组件都应该对自己的文件进行封装。出于一致性的原因,它是使用相同的名称为文件和主选择一个很好的做法。

厦门网站制作

厦门网站制作

一个button.scss文件。

有些组件并不像按钮一样简单。有些比较复杂,内部元素组成。就拿这个博客帖子部件,例如。它有一个缩略图,一个标题,一个摘录链接

厦门网站制作

厦门网站制作

博客文章组件

有时候,定义组件时,你会问自己什么应该是一个较大块的独立组件或部分。要回答这个问题,搜索你的产品或网站的重复图案。如果是用在不同的环境中,它抽象为一个独立的组成部分。在博客文章为例,该.link元素是一个单独的组件,因为它也对网站的其他部分使用。其他元素是特定于博客文章。让我们来看看如何处理与选择的名称这种关系。

3.应用的命名约定

请记住:我们希望我们的架构以传达意义促进组织。在使用我们的组件类的命名约定将帮助我们实现这一目标。一种图案如BEM(块,单元,改性剂)将澄清的成分(块)和它的元素之间的意图和关系,以及当与其他组分相比加强预见性。背后BEM的想法是根据本结构来命名的东西:

  • :组件本身;
  • 元件:所述元件的内部部分(在DOM后代);
  • 修饰符:块或元素的变化。

使用博客文章的例子:

.blog-post {}

博客文章本身。

元件

.blog-post__excerpt {}

博客文章内的摘录。为了表示元素和块之间的关系,BEM使用两个下划线。

变化

.blog-post--small {}

博客文章,将使其更小的变化。来表示修饰符和块之间的关系,边界元使用两个短划线。

在组织层面,这种做法促进了一致性可预测性在整个组件层。在技术层面上,它有助于减少选择的特殊性,提高效率,选择从DOM结构解耦我们的CSS(因此,促进可重用性)。借此另一个例子:

 

section.container div.grid div p {}

 

在这种情况下,浏览器必须检查所有应用选择的条件:

是否有内内的另一个与类的内部与类的?如果是这样,这个风格。<p><div><div>.grid<section>.container

复杂的,对不对?并在该选择那蹒跚开发者可能会问自己:

这是什么选择上范围更广的目的是什么?它是如何涉及到其他的选择?

该BEM基于类的方法,在另一方面,是更精确且有意义的。浏览器只来检查.blog-post__excerpt的DOM类,这是更performatic。它可以重复使用,因为它不紧密DOM结构耦合。和显影剂可以假定它是一个的一部分.blog-post的组件。

包起来

这些技巧只是一个起点,一个基本的基础和结构CSS项目的第一步。关于这个问题进一步阅读,我建议您访问这个名单,我已经与启发本文伟大的开发商一些真棒思想和方法编制。有很多不同的方法有(很多,真的)。随时与问题或pull请求做出贡献吧!

原创文章,作者:网站建设,如若转载,请注明出处:https://www.davidwu.net/archives/8323

服务项目 服务内容 收费标准(元)
开发定制 WordPress主题/插件开发定制 (以最终需求为准)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

邮箱地址不会被公开。 必填项已用*标注