随着Node.js、react-native等技术的不断出现，和互联网行业的创业的层出不穷，了解些前端知识，成为全栈攻城师，快速的产出原型，展示你的创意，对程序员，尤其是在创业的程序员来说，越来越重要，下面我们就跟随著名国外开发者网站上的热推文章《LevelingupinCSS》，从提升你的CSS技巧开始。CSS在刚开始学习的时候看起来非常简单。毕竟，它仅仅就是些样式而已，事实上是这样吗？但是，随着你的不断了解。很快，你会发现CSS没你想象的那么简单，它复杂且有深度。做好这四件事情，能让你在大规模使用CSS的时候保证代码的健壮性：使用适当的语义，模块化，采用统一的命名规范，遵循单一功能原则。使用适当的语义在HTML和CSS编程中有语义标注的概念。语义是指单词的含义和他们间的关系。在HTML编程中，意味着你需要使用一个合适的标签名字来标记。富有语义的HTML是非常简单明确的。另一方面，富有语义的CSS则是更抽象和主观的。编写富有语义的CSS意味着在选择类型的时候，类名要传达出结构和功能信息。类名要很容易被理解。确保它们不要太具体、太特殊。这样，你就可以复用它了。通过这些代码，你可以立即识别出它们的结构、功能和含义。父节点的类名是stream，内容是一个文章列表。它的子节点的类名是streamItem，内容是文章列表中的一篇具体的文章。这使我们很容易的了解到父节点和子节点之间的关系。并且，这些类可以在每一个有文章功能的页面中使用。你可以像阅读一本书一样读HTML和CSS。它会给你讲一个故事。通过故事你可以了解故事中的每一个角色和他们之间的关系。语义丰富的CSS代码容易理解，更便于维护。若果你想进一步了解语义相关的内容，看看《怎么富有语义的为类命名》、《CSS命名不简单》和《富有语义和容易识别（的代码命名）》，再看《关于HTML命名和前端架构》。模块化在这个充满了组件库（以React为例）的时代，模块化就是王者。组件就是由已经解构了的接口创建的可组合的模块。下面是一个ProductHunt（一种发布好的创业项目的网站）前端页面。（在这里推荐下我自己的web前端学习交流群：，不管你是小白还是大神，我都欢迎你们进群学习交流，不定期分享干货，包括我自己整理的最新的前端资料和教程送给大家，欢迎初学和进阶中的小伙伴，一起学习一起交流，共同进步。）由于stream组件和它的子控件是完全独立的，你可以很容易的调整或者更换post组件，并且这不会对stream组件产生任何影响。使用组件的思想将会使你的代码解耦。解耦的代码越多，你的类之间的依赖就越低。这会让你的代码更容易修改，并且使你的代码更长时间的工作下去而不用修改它。组件驱动设计模块化你的CSS时，首先将你的设计分解成多个组件。你可以使用纸和笔，也可以使用类似Illustrator或者Sketch这类的软件。确定你将要如何命名这些组件，同时理清各个组件之间的关系。阅读更多关于CSS组件驱动的文章，详见《CSS建构：可扩展和模块化处理》、《使用Sass编写模块化的CSS》和《模块化你的前端代码——编写高可维护和条理清晰的代码》。采用统一的命名规范目前有几十个不同版本的CSS命名规范。有些人对他们选择的命名规范极其笃定，认为他们的比别人的更好。事实上，不同的人喜欢不同的命名规范。我听到的最好的建议是：选择你觉得最合适的命名规范。我最喜欢的命名规范是BEM。BEM代表块(block)、元素（element）和修饰符（modifier）。Yandex，在俄罗斯的相当于谷歌的搜索引擎，为了解决他们CSS代码库中的缩放问题而提出了它（它指BEM）。关于命名规范要记住的一件事是，无论你喜欢哪种命名规范，你会经常继承或者工作在不同标准的代码库上。请敞开心扉去学习新的标准，用不同的思维去思考CSS。你可以在《深入学习BEM语法》、《BEM》和《BEM简介》上看到更多关于BEM的信息。想要了解不同的命名规范，参见《OOCSS、ACSS、BEM、SMACSS：这些是什么？我该用哪个？》。遵循单一功能原则单一功能原则规定每个模块和类都应该有一个单一的功能，并且该功能应该由这个类完全封装起来。在CSS中，单一功能原则代表每一段代码、类和模块只做一件事。当我们提交CSS文件时，这意味着每个独立的组件（例如轮播效果和导航栏）都应该有自己的CSS文件。无论你使用哪种方式组织文件结构，尽量在决定的时候参考单一功能原则。一旦有某个文件开始变的臃肿，那么考虑按照逻辑功能将它分成多个部分。更多有关组织文件结构和CSS架构的文章，详见《Sass审美1：架构和组织样式文件》和《可扩展和可维护的CSS架构》。当单一功能原则应用于你的每一个CSS类选择器中时，这意味着每一个类选择器都有着唯一的功能。换句话说，要根据不同
转载请注明：http://www.aierlanlan.com/tzrz/7564.html
