网站制作中的css框架设计

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

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

什么是CSS架构？

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

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

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

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

入门

1.分离和分类代码

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

现在是时候根据其项目范围进行分类每个代码块。其中第一个方法那里的介绍选择分类是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请求做出贡献吧！