通过元素,按功能和媒体查询构建CSS(SASS,LESS)文件：3D代码结构？

零-D

每个人都使用包含所有样式的单个文件开始使用CSS。

> style.css

很快，它变得庞大，并且决定按照页面元素将CSS分组在一些文件中：

> html_elements.css
> header.css
> main-area.css
> footer.css

有些可能会发现这不够方便，组风格按功能：

> typography.css
> layout.css
> sticky-footer.css(包含许多元素的声明，而不是页脚)

当项目有很多CSS时，可能需要同时使用这两个组。 CSS文件结构变成二维的：

布局/

> grid-system.css
> header.css
> sidebars.css

看/

>排版/

> main.css
> headers.css
> lists.css

>背景/

> html_elements.css
> header.css
> main-area.css
> footer.css

好的，这个例子是制造的，但你确实明白我的意思。

到目前为止，一切都很好。

输入媒体查询

这就是我的CSS结构弄脏了。

除了上述的2D结构之外，我必须通过媒体查询来构建我的代码：

>我的一些风格是普遍的(适用于任何地方)
>某些仅适用于某些屏幕尺寸：

>小
>中等
>大
>超大

>有些适用于某些屏幕尺寸组：

>除小(非移动样式)之外的所有内容;
>中小型(侧杆不在侧面)
> large and xlarge(你有边栏的地方)

我试图通过在现有的CSS文件中散布媒体查询风格来克服这个问题。 breakpoint指南针扩展有很多帮助，但样式表变得太乱了。找到一种风格，当它没有描绘在文件中构成很大的痛苦。

我尝试通过媒体查询进行分组，然后通过元素和功能进行分组。但是文件结构是二维的，所以你不能添加一个新的维度，你只能添加另一个层次结构。所以，这不是优雅的。此外，它非常笨重。

所以我结束了一个二维结构，一个轴上有媒体查询，另一个轴上是一个丑陋的元素和函数组合。

我完全不满意，但我只是想出了一个优雅的解决方案。请建议一个。

解决方法

CSS已经是一种结构化语言。无论好坏，你的代码的顺序改变它的意思。因此，重要的是任何CSS组织方案主要由级联决定。 CSS的另一个结构方面是语义学。将其用于您的优势。组织的关注是使事情有意义和可维护性。你可以做的最好的事情是保持意义是展示关系。关系已经由语义表达了。

把这些东西放在一起，你最终可以用特征首先和语义组织，而不是外部的概念，比如类型与布局或者屏幕尺寸。这是我的命名方案：

base/
  - Sass imports and settings - no CSS output.
  - e.g _grid,_colors,_rhythm,etc.
general/
  - Initial CSS baseline with resets,defaults,font imports,and classes to extend.
  - e.g. _reset,_root,_fonts,_icons,_defaults,etc.
layout/
  - The rough outline of the site structure.
  - Not "layout" as a set of properties excluding type,"layout" as the overall site template which might well include typography. 
  - e.g. _banner,_nav,_main,_contentinfo,etc.
modules/
  - All the details. First by effect (classes/general),then by widget (ids/specifics).
  - e.g. _users,_admin,_product-lists etc.

媒体查询应尽可能接近其影响的代码。如果可能，他们直接在线(Sass媒体冒泡)。如果这样变得笨重，他们就会移动到外面，而不是在局部之外。 MQ是覆盖。当您覆盖代码时，尤其重要的是您可以准确地查看覆盖的内容。

在某些网站上，您可能会采取更多的结构。我偶尔会在最后添加两个文件夹：plugins /来管理第三方代码，并覆盖/处理不可避免的(尽量避免它们)位置特定覆盖到一个小部件。我也进一步深入，添加了每个字体系的部分字体/文件夹，或添加，编辑，查看等部分的用户/文件夹。具体情况是灵活的，但基本组织保持不变：

>开始一般。>尽可能慢地移动细节。>不要根据任何外部概念(类型/布局，屏幕尺寸等)划分。

通过元素,按功能和媒体查询构建CSS(SASS,LESS)文件：3D代码结构？

解决方法

相关文章