CSS架构

结合SEM和BIO来改进CSS

有人可能会说,CSS很简单,但是“容易”会导致代码混乱。在大家的眼里,使用像Sass或LESS这样的处理器会让事情变得更为简单。但事实上并不一定如此,如果你使用的不小心,你的CSS将变得更难处理,而不是更易处理。Sass?困难吗?Sass的嵌套就展示了这一点,使用不当,Sass的嵌套就是地狱。如果你的Sass代码看起来像这样的,那么你肯定可以使用SEM和BIO来改进你的代码。接下来我就将向你介绍这方面的CSS技术。

编写模块化CSS:BEM

你是否做过多页面的大型网站或者其中一部分?如果你做过,你可能会意识到 CSS 架构不够强大所带来的恐惧。你可能还会研究如何编写可维护的 CSS。由于我们的行业很棒,我们有很多推荐的解决方案。因为专家们的纷纷加入,于是我们有 BEM,OOCSS,SMACSS,Atomic Design 等许多选择。现在,问题不是痛苦 “我不知道该怎么办”,而是: “有这么多的方法,我应该尝试哪个?”我是不是应该把所有的都用一遍,是不是只有一种方法才适合我,或者我是不是应该参考它们做一个自己的架构?。我开始只用一种方法。然后,当我尝试不同的方法时,我开始把我认为有意义的东西包含在我的探索过程中。 在这篇文章中,我想和大家分享一下我如何构建 CSS 以及为什么我这样做。 希望它可以帮助你找到你喜欢的方法。

崇拜CSS

公认的拥有一个编写和管理CSS的方法比什么都要更好。尽管如此,一些开发人员的实践是不利于语义化质量和长期的可维护性。我们要讨论一些被提倡的"CSS框架方法”的问题和作为Web开发人员,我们如何可以更好的解决这些问题。今天最流行的CSS开发框架技术当属OOCSS,尽管还有其他类似的技术存在,如BEM。这些方法试图对CSS采用面向对象的编程原则。尽管样式语言和面向对象的软件设计原则在概念之间存在一定的问题,这些微妙的东西对于一个欠缺经验的开发人员来说可能不会立即显现出来。最令人不安的是,这些方法已经可以广泛的看到博客给其冠以"最佳实践"的评价。“abscence”的证据来阐述使用这些方法的好处——选择高流量网站只是一小部分——这反应了我的观点,他们代表了一种误导和盲目的崇拜

结合智能选择器的语义化的CSS

或许很多前端开发人员都会困惑一个问题,在书写HTML和CSS的时候,结构更重要还是功能更重要?在一些热门的框架例如Twitter Bootstrap里面我们也会看到使用a标签来作为按钮的元素的例子,这样是否合理?一起来读一读这篇文章吧,或许能够解开你的疑惑。

CSS架构:最新最佳实践

大家都已意识到了,在过去的几年里,前端开发领域取得了很大的进展,一些新的思想已经实践出新的方法来解决由来已久的问题。CSS架构在各大论坛与QQ群也讨论比较多了,就连小站也翻译了不少国外有关介绍CSS架构的系列教程。比如说D姐译的《CSS架构》、Jekst根据写的CSS3架构的系列教程译的《CSS架构:代码简洁原则》。今天Jekst根据CSS3架构的系列教程中的《CSS Architectures: New Best Practices》一文所译,向大家介绍了前端编程一些最新最佳的实践方法,很大程度上能够帮助大家编写良好的样式表和HTML文件。

关于HTML语义和前端架构

关于HTML语义化大家讨论的很多,熟不知如何写一个具有语义化的结构。同时前端的架构要怎么布。这些都是做为前端人员应该去考虑的问题?由Jekst根据Nicolas的英文文章原名《About HTML semantics and front-end architecture》进行翻译,Nicolas把他喜欢的思想,经验和主意,还有在过去的一年里,我试验过的想法汇集起来。它们包括HTML语义,前端构架的元素与途径,类命名模式和HTTP压缩。希望这篇译文对大家有所帮助——我们探索的脚步将永无止境,直到回到最初的起点,到那时 我们才会第一次,真正了解 自己出发的地方。

CSS架构:代码简洁原则

很多时候,大(还是小的)网站里的CSS是一个代码臃肿冗余的教材例子,多数代码夸张的使用了不必要的限定符元素,在不必要的长选择器中,过度的使用了特定的选择器,有更合适的选择器时却使用了具有依赖性的后代选择器,还有在不必要、不合适的地方使用了!important。我们可以学习一些基本的可靠的CSS写法,实践来大大提高组织样式表的可维护性。我们最终的目标是给网站组织样式表,极大的提高其可扩展性。Jekst根据的英文文章原名《CSS Architectures: Principles of Code Cleanup》进行翻译,介绍了如何让你的代码更加简洁,如何让你的代码更具效率,如何让你编写代码更加快速?喜欢的同学继续往下阅读吧。

CSS架构

CSS架构,听名称够霸气的了,当然这也是很多CSSer想做的事情,也是一些团队的想做的事情,因为谁都想让自己的工作变得轻松,国内有很多大公司都有自己的前端架构,而且有些成员在维护,但对于小公司或者一些同学想学习写CSS架构却是件很困难的事,困难到都不知道从何处下手,要怎么写,要写到什么程度。由于这一系列的为什么,让很多同学只是想想,却不敢动手一试,就算是试着写的同学都半路夭折了,我就是属于这一类型,但我始终没有放弃,我一直在积累这方面的知识,也在开始构思如何写一个CSS方面的东西让自己的工作变得更轻松,让更多的同学受益。今天D姐根据Philip Walton的《CSS Architecture》一文译了一篇有关于CSS架构的文章,这篇文章从结构到样式进行了详细介绍,更详细介绍了写CSS架构时会碰到的一些坑,又是如何的来填这些坑。通过这篇文章的学习,让我认清了当初的失败之处,同时让我的思想与视野都更开阔了,个人认为是很值得阅读的一篇文章。感兴趣的同学,或者想做这样一件事情的同学,不仿花几分钟阅读一下。

返回顶部