首页 > 博客教程 > seo知识 >

石家庄高端网站开发:如何更好的实现代码的简洁性


编辑:石家庄展为网络有限公司更新日期:2019-08-12

CSS Pt的现代方法。2:构建资源

 

CSS Pt的现代方法。 2:构建资源

设计系统和现代规范在如何解决当前的CSS问题方面发挥了重要作用。  本系列的第一部分中,我们研究了现代CSS工具如何帮助我们编写更有条理和编程的CSS。第二部分以这些工具为基础,研究如何使用它们为我们的网站创建资源。我们将使用Sass自动生成一个CSS系统,完成命名空间。然后我们将深入探讨CSS规范并触及规范当前状态如何帮助解决常见问题的示例。

通过Shopify合作伙伴计划拓展业务

无论您是提供营销,定制还是网页设计和开发服务,Shopify合作伙伴计划都将帮助您取得成功。免费加入并获得收益分享机会,发展业务的工具以及充满激情的商业社区。

注册

系统

 

看起来你到处都在谈论使用设计系统关于设计系统,调查报告设计系统使用和统计的整个会议,以及致力于该概念的Slack团队从外部看设计系统时,高级视图可能看起来很简单,但随着您越来越近,它变得越来越复杂。要理解的主要内容是,设计系统是一组独立系统的术语,它们协同工作,为设计人员和开发人员提供快速创建一致,高效设计和代码的方法。

CSS系统通常是良好设计系统的核心。排版,间距,布局,网格和颜色是设计系统的常见元素,但它们可以独立于完整的设计系统使用。像Sass和PostCSS这样的工具可以帮助自动创建HTML中使用的这些系统。像BEMIT这样的组织方法提供了构建这些系统类名的框架。作为一个例子,我将逐步使用Sass自动创建一个我在过去几年中多次使用过的简单间距系统。这个系统的优点在于它具有很强的可塑性,可以根据每个特定项目的需要进行调整。

您可能也喜欢: CSS Pt的现代方法。1:工具和组织

第1步:变量和地图

 

在开始创建这个系统时,有必要制定一些指导原则,主要是一些由文档驱动的开发。此系统的目标是提供可在HTML中的任何位置使用的类,以向元素添加填充或边距值。这些类需要提供快速选项,以单独添加padding添加margin到顶部,右侧,底部,左侧位置,并且具有允许为所有位置,水平位置和垂直位置添加相等间距的类。该系统应该是自动生成的,以便在编写最少代码的情况下实现一致的输出。

这将是一个遵循ITCSS方法来组织文件的Sass文件,因此我们将命名此文件_trumps.utilities.spacing.scss这里的命名是我发现组织有用的方式。我使用CSS适合的ITCSS部分启动名称,然后我提供一个描述性类别,在本例中为实用程序。由于我很可能会有多个实用程序系统,因此我添加了进一步的说明。使用您的文件名这样描述将有助于您和其他人在代码库增长时快速找到适当的文件。

在这个新的Sass部分文件中,我们将首先添加一个名为的变量$spacing-limit并将值设置为4

  $ spacing-limit4 ;
查看GitHub用❤托管的rawspacing-system-1.scss

此变量是我们的间距系统的最大值。我们写系统将进行迭代,以从间距值创建类0,以4rem1rem递增。

接下来,我们创建一个我们想要定位的位置的地图。如前所述,我们希望定位顶部,右侧,底部和左侧位置,并提供一种方法来创建平等地定位所有位置的类,将顶部和底部值组合为垂直类,左右组合值作为水平类。正如命名空间部分所述,重要的是保持命名简洁但人类可读。考虑到命名空间,我们将创建一个键值对,其中键是我们的简洁名称,限制为三个字符,值将是该属性的全名。请注意,由于所有,垂直和水平都是位置的集合,因此它们的值是null

  $ spacing-key :(
  顶部顶部
 
 
  btm bottom
  all :null,
  vert :null,
  horiz :null
  );
查看GitHub用❤托管的rawspacing-system-2.scss

第2步:使用类名称进行增量循环

 

就像塔伦蒂诺电影一样,我们将把这个演示的结尾放在中间。这样做的原因是要了解我们将在下一步中将哪些信息传递到循环混合中。对于初学者,我们将创建一个@for循环,从0我们的$spacing-limit增加到4这会增加整数,因此我们的类将包含0,1,2,3和4作为间距类中的值。

  @for $ space 0 $ spacing-limit {
   
  }
查看GitHub用❤托管的rawspacing-system-3.scss

接下来我们将创建一个新变量,它接受$space增量值并将单位添加到它,在本例中为a rem使用Sass就像将两者结合起来一样简单。

  @for $ space 0 $ spacing-limit {
  $ value$ space + rem;
  }
查看GitHub 用❤托管的rawspacing-system-4.scss

现在我们需要创建我们的类名,或者至少创建它们的开头。由于这些是实用程序类,我们将它们命名为util-,然后为padding我们将使用padmargin我们将保持原样。

  @for $ space 0 $ spacing-limit {
  $ value$ space + rem;
  .util-pad {
  }
   
  .util-margin {
  }
  }
查看GitHub用❤托管的rawspacing-system-5.scss

我们的下一步将负责创建我们需要添加到这两个选择器块中的mixin,但是现在我们可以调用我们即将创建的mixin。这个mixin将命名为'spacing-loop',它由the启动@include,包括选择器块中的mixin。注意,此时你的Sass会在生成时出错,因为它没有调用mixin spacing-loop我们希望将三个值传递给尚未混合的值,即我们作为字符串定位的属性的名称,因此类的“填充”和.util-pad类的“边距” .util-margin然后我们想要传递$space值,以及我们的单位版本$value

  @for $ space 0 $ spacing-limit {
  $ value$ space + rem;
  .util-pad {
  @include spacing-loop padding $ space$ value);
  }
   
  .util-margin {
  @include spacing-loop margin $ space$ value);
  }
  }
查看GitHub用❤托管的rawspacing-system-6.scss

第3步:位置循环混合 

 

我们的最后一步是最复杂的步骤,可能需要一些额外的阅读才能完全理解。首先,让我们制作mixin并定义它将接受的属性。我们会尝试保持名称相同以防止混淆,$property是我们要定位的属性名称,margin或者padding然后我们将通过上一步变量$space$value属性。

  @mixin spacing-loop$ property$ space$ value){
  }
查看GitHub用❤托管的rawspacing-system-7.scss

现在我们的Sass再次编译,我们将创建一个@each循环,$spacing-key从第一步开始遍历我们的地图。这里的结构告诉@each我们从地图中获取密钥和值,并将它们分别分配给变量$poskey$posvaluepos名称中的指的位置。

  @mixin spacing-loop$ property$ space$ value){
  @each $ poskey$ posvalue $间距键 {
  }
  }
查看GitHub用❤托管的rawspacing-system-8.scss

接下来,我们将通过使用混合变量以编程方式创建类名。第一个变量由&符号&)表示。这是Sass的一个特殊功能,称为父选择器,它捕获选择器的范围直到它被调用的点。在这种情况下,它将转换为.util-margin.util-pad,取决于mixin运行的选择器块。 

接下来的两个部分是标准的Sass变量,但由于它们在类名中使用,因此必须先对它们进行插值,以便它们安全地输出为Sass,否则Sass会认为类名是util-margin-$poskey-$space@each循环遍历映射的所有条目时,它将插入$poskey值和从步骤2循环$space传递的当前迭代@for。在实用程序类的情况下,所有边距位置的间距为2,从此设置创建的类将读取.util-margin-all-2请注意,当Sass变量用作选择器时,必须通过将变量包装在以哈希/井号开头的大括号集中进行插值#{$variable}

  @mixin spacing-loop$ property$ space$ value){
  @each $ poskey$ posvalue $间距键 {
  - #{$ poskey} - #{$ space} {
  }
  }
  }
查看GitHub用❤托管的rawspacing-system-9.scss

现在我们已经创建了类选择器,现在是时候在最后一位信息中添加选择器块属性了。由于我们的钥匙allverthoriznull,我们需要执行和@if语句来检测的情况下,输出正确的属性或属性。第一次检查将看是否$poskey等于“all”,在这种情况下,它将获取$prop“margin”或“padding”的值并输出$value。 

请注意,使用变量作为属性名称时,也必须进行插值。任何时候变量都不被称为属性值,它必须进行插值。我们可以重复这个检查verthoriz创造适当的属性。一旦我们完成了所有的if条件,我们就可以结束一个@else条件,它将获得$posvalue适当迭代的关键值,即$poskey等于“右” $posvalue输出的情况right

  @mixin spacing-loop$ property$ space$ value){
  @each $ poskey$ posvalue $间距键 {
  - #{$ poskey} - #{$ space} {
  @if $ poskey == all {
  #{ $ property }$ value ;
  }
  @else if $ poskey == vert {
  #{ $ property } -top$ value ;
  #{ $ property } -bottom$ value ;
  }
  @else如果 $ poskey == HORIZ {
  #{ $ property } -right$ value ;
  #{ $ property } -left$ value ;
  }
  @else {
  #{ $ property } - #{ $ posvalue }$ value ;
  }
  }
  }
  }
查看GitHub用❤托管的rawspacing-system-10.scss

将这一切全部拉到一起大约是50行Sass,它将输出70个独特的间距实用程序类。然后,通过为所需的间距量添加适当的类,可以使这些类快速地间隔出您网站上的内容。由于它使用了长期存在的属性和方法,因此该系统创建的类具有巨大的浏览器支持。由于旧版浏览器不太需要支持,我们可以使用CSS自定义属性开始扩展这个系统,正如Kasey Bonifacio在她的文章可管理实用程序系统中使用CSS变量所示

您可能还喜欢: 使用CSS变量的反应式UI动画

CSS规范

 

在编写现代CSS时,我们必须回到CSS规范本身。CSS工作组已经采取了许多线索来自网络的发展趋势和实践在过去十年中心脏。在过去几年中,CSS获得了功能查询自定义变量数学功能以及识别元素的独特方法。并且我们忘记了混合使用FlexboxCSS Grid的所有布局选项。 

有了所有这些新功能,很难知道从哪里开始。我的日常工作涉及引用MDN Web文档我可以定期使用网站。还有其他可用的资源,但这两个资源已成为我的开发伙伴。没有必要知道每个属性,但知道如何导航在哪种情况下使用哪个属性是一项重要技能。简单地探索这两个网站可以揭示很多关于作为前端开发人员可用的选项。

我想给你留下三个特定于CSS的东西,我真正依赖它。这些东西不同于迄今为止所讨论的所有花哨的工具和方法 - 纯CSS。

渐进增强和功能查询

 

CSS的一个显着特征是属性在列表中越来越重要的方式。这意味着当CSS属性排序良好时,它们可以为特定浏览器提供特定样式,而无需依赖基于JavaScript的功能检测器,如Modernizr例如,在编写布局样式时,首先使用浮点数,然后在Flexbox中添加,然后再添加CSS Grid。这将允许Internet Explorer 9等浏览器获得基于浮动的布局。 

这是一个简单的例子。让我们从浮动的旧布局方法开始,以及我们需要完成它的工作。在这个例子中,我将display: inline-block用作清除浮动元素的方法。

  .layout-main {
  display inline-block ;
  宽度 100 ;
  }
   
  .layout-main__left {
  浮动 ;
  宽度 75 ;
  }
   
  .layout-main__right {
  浮动 ;
  宽度 25 ;
  }
查看GitHub用❤托管的原始进度增强1.css

使用IE 10和11以及旧版本的现代浏览器,我们可以添加Flexbox版本。但是,由于我们希望这是渐进的并且随着级联一起流动,我们在旧版本的属性下面添加类似属性:

  .layout-main {
  display inline-block ;
  显示 flex ;
  宽度 100 ;
  }
   
  .layout-main__left {
  浮动 ;
  宽度 75 ;
  }
   
  .layout-main__right {
  浮动 ;
  宽度 25 ;
  }
查看GitHub 用❤托管的rawprogressive-enhancement-2.css

令人难以置信的是,我们需要添加的是display: flex;这些类现在正在使用Flexbox。Flexbox周围的属性否定子类中的浮点数,但仍使用宽度。这是有效的,因为Flexbox的自然状态是将所有子元素保持在一行上,并且子元素上的宽度允许空间被完全填充,而不用担心第二个子包装在第一个下面。

增强示例的最后一步是添加CSS Grid。尽管父类属性的增加一样简单display: gridgrid-columns-template财产问题与孩子的宽度就出现了。与浮点和Flexbox方法不同,CSS网格宽度由父级通过grid-columns-template子项的宽度现在将是列宽的百分比。要删除这些宽度,我们可以添加一个功能查询来检查是否支持CSS Grid @supports (display: grid)

  .layout-main {
  display inline-block ;
  显示 flex ;
  显示网格 ;
  宽度 100 ;
  }
   
  .layout-main__left {
  浮动 ;
  宽度 75 ;
  }
   
  .layout-main__right {
  浮动 ;
  宽度 25 ;
  }
   
  @supportsdisplaygrid){
  .layout-main {
  grid-template-columns 75 25 ;
  }
   
  .layout-main__left
  .layout-main__right {
  宽度自动 ;
  }
  }
查看GitHub用❤托管的原始进步增强型3.css

正如您所看到的,@supports工作就像@media,并且功能查询也可以嵌套在媒体查询中。使用此方法时需要注意的一点是,如果您使用Autoprefixer自动创建供应商前缀,它将display: grid为IE 11 创建供应商前缀display: -ms-grid虽然IE11很早就实现了CSS Grid,但它对功能查询没有任何支持。这可能会导致问题,因为网格属性已添加到元素,但宽度无法控制。在这种情况下,最好将display: grid声明分组在特征查询中,并强制IE 11使用Flexbox方法。

您可能也喜欢: 什么是渐进增强以及您为什么要关心

考虑使用替代选择器

 

当我们谈论CSS命名方法和组织时,它几乎总是关于类选择器的使用。这是可以理解的,因为类选择器是一个定义的选择器类型,可以有多个值,这是一个严重依赖的方面。但是,还有许多其他方法可以定位一个元素,为CSS选择器提供类似条件的逻辑。特别是两个,我发现有力的工作,是属性选择器和:not()选择器。

自CSS 2.1以来,属性选择器已经出现,并支持IE 7。它们可用于跟踪和设置input元素type,例如input[type="radio"]选择单选按钮。它们还可以帮助跟踪数据属性中空格分离的lis中的特定值,例如[data-date~="tuesday"]最近,我已经看到使用属性选择器的极好用途,aria-expanded以检查元素是否被扩展,并提供必要的CSS来隐藏或显示元素。

:not()伪类是CSS3此外,其允许选择方案以从应用样式被排除。当一个特定的状态指示类不存在时,这作为一种应用样式的方式派上用场。例如,如果我们想要在没有图标的情况下为按钮设置特定样式,我们可以编写如下选择器:.button:not('.has-icon') {...}起初它似乎不是一个值得使用的方法:not(),但我发现一旦它被认为是一个选项,它解决的问题揭示了自己。

我在过去一年左右经常采用的方法是将这两个选择器组合起来为通用元素创建样式。在编写通用元素选择器(例如pa或)时h4,这些选择器将影响这些元素的每个实例的结果。由于这个原因,元素选择器通常不受欢迎,并且应用于DOM中的这些元素之一的任何类将需要额外的CSS来抵消元素的样式。 

但是,对于可能在没有类的情况下显示的元素具有默认样式非常方便。这使我通过添加:not([class])到那些选择器来包含没有类的元素选择器。这允许通用元素获得自定义样式,但不会损害类选择器。一个p {...}选择变得p:not([class]) {...}和现在的冲突具体到这个类在DOM使用的样式不会来:<p class="hero-subtitle">...</p>

您可能还喜欢: 使用CSS动画来指导更好的电子商务体验

玩CSS

 

我作为CSS开发人员多年来学到的最重要的事情是知道CSS需要使用CSS的游戏时间。当我在2012年开始使用CodePen时,这个想法变得很快。我开始制作一个振荡风扇动画,作为尝试嵌套元素动画的一种方式。从那里我发现使用CSS的最佳方式是采取挑战并添加限制。 

“作为一名CSS开发人员,我多年来学到的最重要的事情就是知道CSS需要使用CSS的游戏时间。”

通过尝试其中一个CSS 每日 挑战,但添加自己的规则来挑战。尝试一个新属性,强迫自己只使用一个HTML元素来完成任务,或者看看你是否可以单独CSS完成一个kata,比如FizzBu​​zz当你使用CSS时,你学到的东西比你的使用仅限于项目的需要。

CSS作为桥梁

 

CSS是设计和开发之间的桥梁,导致语言独特,有能力,有时被低估。丰富而复杂的能力使经验丰富的开发人员能够创造出真正迷人的风格。同时,作为Web技术的介绍,语言仍然简单易用。CSS的这些特性在编写既不是设计也不是编程的CSS时需要特定的思维方式,而在中间某处。该技术在过去几年中经历了强劲的扩张,并没有放缓的迹象。

Sass和Node等技术为语言带来了编程和自动化,并为程序员提供了可能导致混淆的概念。作为回报,CSS规范已经扩展到包含CSS工具引入的想法,添加了特征检测,数学和变量。尽管在CSS中添加编程层有了进一步的改进,但该语言仍然需要一种特定的思维模式,使级联功能成为开发高效实用样式的核心。


13933871212