随着Node.js、react-native等技术的不断涌现，以及互联网行业创业的出现，程序员尤其是创业的程序员，了解一些前台知识，成为一名全栈攻城工程师，快速制作原型展示自己的创意变得越来越重要。下面就跟随国外著名开发者网站的热门文章《在CSS中练级》，从提升自己的CSS技能开始吧。 CSS在学习之初看起来很简单。 毕竟只是一些风格而已。真的是这样吗？然而，随着你继续理解 很快，你会发现CSS并没有你想象的那么简单，它是复杂而深刻的。 做好这四件事可以保证你的代码在大规模使用CSS时的健壮性:使用恰当的语义、模块化、采用统一的命名约定、遵循单一功能准则。 使用恰当的语义在HTML和CSS编程中有语义标注的概念。 语义是指词的意义及其关系。 在HTML编程中，这意味着你需要使用一个合适的标记名来标记它。 下面是一个经典的例子 & lt！-不好-& gt；& ltdiv class="footer " >& lt/div & gt；& lt！-好->；& lt页脚& gt& lt/footer & gt；语义HTML非常简单明了。 另一方面，语义CSS更具一般性和主观性。 编写语义CSS意味着在选择类型时，类名应该传达结构和功能信息。 类名应该容易理解。 确保它们不要太具体和特殊。 这样，您就可以重复使用它 为了说明什么是好的类名，请看看这个简化的中型网站的CSS示例。 & ltdiv class="stream " >& ltdiv class="streamItem " >& ltarticle class="postArticle " >& ltdiv class="postArticle-content " >& lt！-内容-& gt；& lt/div & gt；& lt/article & gt；& lt/div & gt；& lt/div & gt；通过这些代码，你可以立即识别它们的结构、功能和意义。 父节点的类名是stream，内容是文章列表。 其子节点的类名为streamItem，内容为文章列表中的一篇特定文章。 这让我们很容易理解父节点和子节点之间的关系。 而且，这些类可以在每个具有文章功能的页面中使用。 你可以像看书一样阅读HTML和CSS。 它会告诉你一个故事。 通过故事，你可以了解故事中的每个人物以及他们之间的关系。 语义CSS代码容易理解，也更容易维护。 如果想进一步了解语义相关的内容，请看一下如何语义命名类，CSS命名不简单，带语义且易识别的代码命名，再看一下关于HTML命名和前台架构。 在这个充斥着组件库的时代(以React为例)，模块化才是王道。 组件是由解构的接口创建的可组合模块。 以下是Product Hunt(一个发布好的创业项目的网站)的一个首页 作为练习，让我们把这一页分成一系列的组成部分。 每个颜色框代表一个组件，流节点被分成几个流项目子节点。 & ltdiv class="stream " >& ltdiv class="streamItem " >& lt！-产品信息-& gt；& lt/div & gt；& lt/div & gt；大多数组件可以分解成更小的组件。 每个流项目组件都有一个缩略图和一个特殊的产品信息。 & lt！-流组件->；& ltdiv class="stream " >& ltdiv class="streamItem " >& lt！- POST组件->；& ltdiv class="post " >& ltimg src = " thumbnail . png " class = " post thumbnail "/& gt。& ltdiv class="content " >& lt！-产品信息-& gt；& lt/div & gt；& lt/div & gt；& lt/div & gt；& lt/div & gt；因为流组件及其子控件是完全独立的，所以您可以轻松地调整或替换post组件，这不会对流组件产生任何影响。 使用组件的想法将会解耦你的代码。 解耦的代码越多，类之间的依赖性就越低。 这将使您的代码更容易修改，并使您的代码在不修改它的情况下工作更长时间。 组件驱动的设计当你的CSS模块化时，首先把你的设计分解成多个组件。 可以用纸和笔，也可以用Illustrator或者Sketch之类的软件。 确定如何命名这些组件，同时阐明它们之间的关系。 阅读更多关于CSS组件驱动的文章，详见CSS构造:可伸缩模块化解决方案，用Sass编写模块化CSS，模块化你的前端代码——编写高可维护性、清晰的代码。 目前有几十种不同版本的CSS命名约定。 有些人对自己选择的命名约定非常确定，认为自己的比别人的好。 事实上，不同的人喜欢不同的命名约定。 我听过的最好的建议是:选择你认为最合适的命名约定。 以下是常用命名约定的简要列表:面向对象CSS oocss block Element Modifier(BEM)CSS的可扩展和模块化架构(SMCSS) Atomic我最喜欢的命名约定是BEM。 BEM代表块、元素和修改器。 相当于俄罗斯Google的搜索引擎Yandex提出了it (BEM)来解决他们CSS代码库中的缩放问题。 BEM是一个非常简单——也非常严格——的命名约定。 。阻止{}。阻止_ _ element {}。块修饰符{}块表示高级类。 元素是块的子模块。 修饰符代表不同的状态。 & ltdiv class = " search " & gt& ltinput type = " search _ _ BTN search _ _ BTN-active "/& gt；& lt/div & gt；在上面的例子中，搜索是一个块，搜索按钮是它的元素。 如果你想改变按钮的状态，我们可以给按钮添加一个修饰符，比如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组织文件的另一种常用方法是根据文件的功能对它们进行分组。 以chestnut为例，如上图，所有与carousel effect组件相关的文件都被分类在一起。 这样，你可以更容易地找到相关文件。 除了分离组件的样式之外，最好使用单个函数标准来分离全局样式。 /base |-application . CSS |-typography . CSS |-colors . CSS |-grid . CSS在这个示例中，每个相关的样式都被分离到自己的样式文件中。 这样，如果你想改变风格中的颜色，你会很容易找到。 无论你用哪种方式组织文件结构，在做决定时都要尽量参考单一功能准则。 一旦一个文件变得臃肿，考虑根据逻辑功能把它分成多个部分。 更多关于组织文件结构和CSS架构的文章，请参考Sass美学1:架构和组织风格文件以及可扩展和可维护的CSS架构。 当单个函数标准应用于每个CSS类选择器时，这意味着每个类选择器都有一个唯一的函数。 换句话说，应该根据不同的关注点将样式划分到不同的类选择器中。 下面是一个经典的例子:。splash { background:# f2f2f 2；颜色:# fffff边距:20px填充:30px边框-半径:4px位置:绝对；top:0；右:0；底部:0；左:0；}在上面的例子中，我们耦合了关注点 这个类splash不仅包含它自己的样式和逻辑，还包含它的子节点。 为了解决这个问题，我们可以将这段代码分成两个新的类。 。飞溅{位置:绝对；top:0；右:0；底部:0；左:0；}现在我们有两个类，splash和splash content 我们可以把splash作为一个通用的全屏类，它可以有任何子节点。 子节点关心的所有属性都在splash内容中，它与父节点的属性完全解耦。 你可以阅读下面的文章，进一步了解单函数准则在样式表和类中的应用。 单函数准则在CSS中的应用及单函数准则 简单比复杂好。如果你问任何一个成功的前台开发工程师或者CSS架构师，他们都会告诉你，他们从来没有对自己的代码完全满意过。 写好CSS是一个迭代的过程。 简单地开始，遵循基本的CSS规则和样式指南，然后迭代。 很想知道你的CSS学习之路。 你最喜欢的命名惯例是什么？你如何组织你的代码文件？你可以留言告诉我。