从代码的第一行开始，每个人都开始了解正确组织代码并优化整个工作区的重要性。
具体讨论哪个行业并不重要，但重要的是要了解，无论哪里有代码，都必须有创建和存储规则。
当然，在第一对夫妇中，遵守某些规则和命令似乎只需要时间，而实际上这似乎是完全不同的。 编写代码的任何原则的精髓在于，我们不会一劳永逸地编写代码-我们会出于编辑和修改的目的而不断回头。
如果混乱和不可预测的局面在那里，这个过程可能会变成一个真正的问题。 如果此混乱不是由您而是由无法与您建立联系的人造成的，则此问题可能会加剧。 有一些方法可以消除这种情况。
如果我们谈论CSS，那么我们可以放心地说-我们每个人都有意识地使用某种方法。 即使一个人不使用某些规则和标准，他仍然有自己的习惯并不断重复使用技巧。
编写代码的方式不必一定要被普遍接受和标准化，其他必须是强制性的-它们必须是可预测的。
您应该注意的方法列表不多：
-边界
-Smacss，
-OOCSS，
-MCSS，
-原子CSS
原子CSS可能是最不寻常，甚至有些令人恐惧的方法，幸运的是，它并不能阻止它变得非常容易理解和预测。
为了证实我的选择，我必须退后一点。
几乎原子的CSS
有时，在创建界面的阶段，绝大多数项目的根目录看起来像三个文件和两个文件夹：
>fonts >img -index.html -style.css -script.js
但是这种简单性似乎看似方便，实际上，至少在这三个文件中的两个中，发生了可怕的事情。
两件事总是让我烦恼-混乱和缺乏风格。 在Css中，许多不同的细微差别属于无序分类，但是最令我不满意的是，不断为不同的选择器重复相同的规则和属性。
解决此问题的第一个方法是：
- 创建一个名为“ re-use.css”的文件，
- 在该文件中创建指令，理论上，多个选择器可能需要这些指令，
- 在同一条指令中添加不同的选择器。
它看起来像这样：
... .class { display: inline-block;} .class { text-transform: uppercase;} ...
并随后接受以下内容：
... .menu-link, .primary-button, .form-button, .footer-link, .social-link { display: inline-block;} ...
当然，此解决方案非常不便，而且幸运的是临时的。 我不停地在文件之间无休止的切换以及在文件中找到正确的位置而烦恼不已，我得出的结论是，创建分别负责一个指令的单独的类会更加方便：
...
.inline-block { display: inline-block;} .block {display: block;} .uppercase {text-transform: uppercase;}
在html文件中，带有大量类的标签看起来很奇怪，但是这种解决方案在我看来似乎可以接受：
<aside class=”sidebar fixed left top w-30 h-100 main-fill”></aside>
一眼就能知道这是一列固定位置的侧边栏，位于屏幕左侧，占据了宽度的30％和高度的100％，并填充了主色。
我用标准格式编写的所有与数值有关的内容，主要是外部和内部缩进。 为此，我添加了一个单独的类，该类首先出现在每个标签或标签组中，在上面的示例中是“ slider”类。
这是一种几乎原子且几乎方便的方法。 几个缺点使他不舒服，其中最重要的是以下情况：
- 在创建大量类似标签（例如列表项）时，我不得不复制很多类，而且看起来很麻烦，
- 进行任何更改时，我必须分别删除和添加每个元素的类，
- 有许多难以使用的未使用类。
然后有两件事可以解决所有问题，这就是预处理器和模板引擎。
在他们的帮助下，我修改了我的方法，并使布局愉快而方便。
几乎完美的CSS
我将从预处理器开始。 他的选择不是根本性的，我首先使用Sass，然后使用SCSS，最后切换到Stylus，因为我尊重极简主义，并且Stylus尽可能地做到极简（由于其受欢迎程度，下面的示例中将使用scss）。
因此，我要做的第一件事是使用@extend指令编写了看起来像真实原子的其他类：
.flex { display: flex; flex-wrap: no-wrap; } .flex-jc-center { @extend .flex; justify-content: center; } .flex-ai-center { @extend .flex; align-items: center; }
我喜欢这个主意，@ extend指令引起了原子核的相似，旁边还有其他指令。
我决定应该发展这个想法，并为生物创建一个单独的文件。 我将有机体称为包含多个@extend指令的类：
.header { @extend .fixed; @extend .w-100; @extend .main-fill; @extend .left; @extend .top; @extend .flex-ai-center; @extend .z-top; }
在用各种生物创造出一个小的“动物”之后，我决定对需要缩进和尺寸数值的类进行一些处理。
预处理器功能帮助我再次解决了这一问题，在此基础上，我编写了一些函数并添加了变量。
首先，我详细研究了从设计师那里获得的图形项目，并揭示了许多模式：
- 每个项目的颜色数量，
- 字体数量
- 文本和标题的不同大小的数量，
- 重复缩进（用于节，按钮等）
第一步是编写函数和mixins创建必要的类：
// px em @function em($pixels, $context: $browser-context) { @return #{$pixels/$context}em };
// $text-size: ( l: 18, m: 16, s: 14, xs: 12 );
@mixin emFonts($list, $n) { // $list – , n – . @each $status, $size in $list { // - &-#{$status} { font-size: em($size - $n); // } } }
现在，我们可以在任何方便的地方调用混合功能和函数的组合：
.txt { @include emFonts($text-size, 0) }
在输出中，我们得到了4个不同大小的文本类：
.txt-m { font-size: 1.125em; } .txt-s { font-size: 1em; }
同样，将创建并调用标题大小，文本和填充颜色，字体等的函数。
也就是说，每个项目的工作都始于填写变量的值，然后类和函数本身从一个项目迁移到另一个项目。
模板引擎。
我认为你们中的许多人都使用模板，最有可能的是Pug（以前称为Jade）。
对于原子排版，这要归功于三件事：
Pug完全使我们摆脱了繁琐的HTML代码微类，因为我们可以打开以下代码：
… <ul class=”menu__list flex-ai-center w-100 relative “> <li class=”menu__item m-color m-font txt-s inline-block bold-border”>first</li> <li class=”menu__item m-color m-font txt-s inline-block bold-border”>second</li> <li class=”menu__item m-color m-font txt-s inline-block bold-border”>third</li> </ul>
方便编辑：
-let menuItemClasses = 'menu__item m-color m-font txt-s inline-block bold-border' // ul li(class=`${menuItemCLasses}`) frst li(class=`${menuItemCLasses}`) second li(class=`${menuItemCLasses}`) third ... </ul>
或在另一个实施例中，使用循环：
let menuItems = ['first', 'second', 'third'] ul -for(let item of menuItems) { li(class=”menu__item m-color m-font txt-s inline-block bold-border”) -}
这同样很方便，因为具有必要类的行不会重复多次。
该方法的最后一个漏洞是代码中保留了大量未使用的类。 但是，通过向项目构建器添加可删除不必要类的插件，可以轻松解决此看似严重的问题。
结论
最后，我想说以下几点：
在开始使用“几乎是原子的方法”之前，我使用了smacss和BEM了很长时间。 结果，我从bem那里只留下了需要缩进和大小描述以及文件和文件夹存储层次结构的类的名称。 一组现成的类和函数，我作为库连接到项目。
我要指出的重要一点是页面及其各个部分的整体布局的便利性。 借助微类，可以轻松地在模板引擎中创建页面或部分的“骨架”，然后继续为其编写样式。