当前位置: 首页 > 科技观察

进阶CSS:提升你前端水平的4个技巧

时间:2023-03-22 16:39:52 科技观察

译者注:随着Node.js等技术的不断涌现。攻城高手,快速出原型,展现你的创意对于程序员,尤其是刚创业的程序员来说越来越重要。跟着国外著名开发者网站《Leveling up in CSS》上的热门文章,从提高你的CSS技能开始吧。刚开始学习CSS时,它看起来非常简单。毕竟,它只是风格,不是吗?但是,随着你的学习。很快,你会发现CSS并不像你想象的那么简单,它复杂而深奥。做好这四件事可以让你在大规模使用CSS时保证代码的健壮性:使用适当的语义、模块化、采用统一的命名约定、遵循功能单一的原则。在具有适当语义的HTML和CSS编程中有语义注释的概念。语义是指单词的含义以及它们之间的关系。在HTML编程中,这意味着您需要使用适当的标签名称来进行标记。下面是一个经典的例子。

语义HTML非常简单明了。另一方面,语义CSS更加抽象和主观。编写语义丰富的CSS意味着类名在选择类型时传达结构和功能信息。类名应该易于理解。确保它们不是太具体和具体。这样,您就可以重复使用它。要了解什么是好的类名,请查看来自Medium站点的这个简化的CSS示例。
通过这些代码,您可以立即认识它们的结构、功能和含义。父节点的类名为stream,内容为文章列表。其子节点的类名为streamItem,内容为文章列表中的具体文章。这让我们很容易理解父节点和子节点之间的关系。并且,这些类可以在每个具有文章功能的页面中使用。您可以像阅读书籍一样阅读HTML和CSS。它会告诉你一个故事。通过故事你可以了解故事中的每个人物以及他们之间的关系。语义丰富的CSS代码易于理解和维护。如果您想了解更多有关语义的信息,请查看《怎么富有语义的为类命名》、《CSS 命名不简单》和《富有语义和容易识别(的代码命名)》,然后查看《关于 HTML 命名和前端架构》。模块化在这个组件库时代(以React为例),模块化为王。组件是从解构接口创建的可组合模块。下面是一个ProductHunt(发布好的创业项目的网站)前端页面。作为练习,让我们将此页面分解为一系列组件。每个颜色框代表一个组件,流节点被划分为若干个流项子节点。大多数组件都可以分解成更小的组件。每个流项目组件都有一个缩略图图像和一个特色产品信息。由于流组件和它的子控件是完全独立的,你可以很容易地调整或更换post组件,这不会对stream组件有任何影响。使用组件的思想会解耦你的代码。分离的代码越多,类之间的依赖性就越低。这将使您的代码更易于更改,并使您的代码在不更改的情况下工作更长时间。组件驱动设计当模块化你的CSS时,首先要将你的设计分解成组??件。您可以使用纸和铅笔,或Illustrator或Sketch等程序。决定如何命名这些组件,并阐明各个组件之间的关系。在《CSS 建构:可扩展和模块化处理》、《使用 Sass 编写模块化的 CSS》和《模块化你的前端代码——编写高可维护和条理清晰的代码》阅读更多关于CSS组件驱动的文章。采用统一的命名约定目前有几十种不同版本的CSS命名约定。有些人非常执着于他们选择的命名约定,认为他们的命名约定比其他人的更好。事实上,不同的人喜欢不同的命名约定。我听过的最好的建议是:选择你认为最合适的命名约定。以下是常见命名约定的简要列表:面向对象的CSSOOCSS块元素修饰符(BEM)CSS的可扩展和模块化架构(SMACSS)Atomic我最喜欢的命名约定是BEM。BEM代表块、元素和修饰符。Yandex,在俄罗斯相当于谷歌的搜索引擎,提出了它(它指的是BEM)以解决其CSS代码库中的扩展问题。BEM是一个极其简单——也极其严格的——命名约定。.block{}.block__element{}.block--modifier{}块代表高级类。元素是块的子模块。修饰符代表不同的状态。在上面的示例中,搜索是块,搜索按钮是其元素。如果你想改变按钮的状态,我们可以给按钮添加一个修饰符,比如active。关于命名约定要记住的一件事是,无论您喜欢哪种命名约定,您通常会继承或使用具有不同标准的代码库。请乐于学习新标准并以不同的方式思考CSS。您可以在《深入学习 BEM 语法》、《BEM 101》和《BEM 简介》阅读更多关于BEM的信息。对于不同的命名约定,请参阅《OOCSS、ACSS、BEM、SMACSS:这些是什么?我该用哪个?》。遵循单一功能原则单一功能原则指出每个模块和类都应该有一个单一的功能,并且该功能应该被类完全封装。在CSS中,单一功能原则意味着每一段代码、类和模块只做一件事。当我们提交CSS文件时,这意味着每个单独的组件(例如轮播和导航栏)都应该有自己的CSS文件。/components|-carousel|-|-carousel.css|-|-carousel.partial.html|-|-carousel.js|-nav|-|-nav.css|-|-nav.partial.html|-|-nav.js组织文件的另一种常用方法是按功能对文件进行分组。例如,如上图,将所有与轮播效果组件相关的文件归类到一起。使用此方法可以使您更容易找到相关文件。***除了分离组件的样式外,还采用了单一功能的原则来分离全局样式。/base|-application.css|-typography.css|-colors.css|-grid.css在这个例子中,每个相关的样式被分离到它自己的样式文件中。这样,如果您想更改样式中的颜色,您将能够轻松找到它。无论你用哪种方式来组织你的文件结构,在决定时尽量参考单一功能原则。一旦文件开始变得臃肿,考虑将其分解成逻辑部分。有关组织文件结构和CSS架构的更多文章,请参阅《Sass 审美 1:架构和组织样式文件》和《可扩展和可维护的 CSS 架构》。当单一功能原则应用于您的每个CSS类选择器时,这意味着每个类选择器都具有唯一的功能。换句话说,根据不同的关注点将样式分离到不同的类选择器中。这是一个经典的例子:.splash{background:#f2f2f2;color:#fffff;margin:20px;padding:30px;border-radius:4px;position:absolute;top:0;right:0;bottom:0;left:0;}在上面的例子中,我们耦合了关注点。splash类不仅包含它自己的样式和逻辑,还包含它的子节点。为了解决这个问题,我们可以将这段代码分成两个新类。.splash{position:absolute;top:0;right:0;bottom:0;left:0;}现在我们有两个类splash和splashcontent。我们可以将splash视为一个通用的全屏类,它可以有任何子节点。所有子节点关心的属性都在splash内容中,与父节点的属性完全解耦。通过阅读以下文章,您可以了解有关将单一功能原则应用于样式表和类的更多信息。《单一功能原则在 CSS 中的应用》和《单一功能原则》。简单胜于复杂如果你问任何成功的前端开发人员或CSS架构师,他们会告诉你他们永远不会对自己的代码完全满意。编写好的CSS是一个迭代的过程。从简单开始,遵循基本的CSS规则和样式指南,然后进行迭代。我很想听听您的CSS学习路径。您首选的命名约定是什么?你如何组织你的代码文件?请随时在评论或推文中让我知道。