`
liu.da101
  • 浏览: 7809 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
最近访客 更多访客>>
社区版块
存档分类
最新评论

更好的组织CSS

    博客分类:
  • css
阅读更多

有很多时候,本人在写CSS的时候,总是各种嵌套,这样据说会导致效率很低,而且不容易修改。这两天看了一个牛人的博客,大致有如下总结:

1,父标签就使用普通的class,然后子标签如果需要,则用父标签的class作前缀,后缀为自身的class。如,父标签为entry,则子标签为entry_counter

2,强烈建议使用Less工具来开发css,简单易维护

3,css要分模块,按照使用范围分为全局模块,局部模块和组件。开发时的css文件要分离开来,全局文件按照全局模块分离成多个,如global.css,global/common.css,global/footer.css。局部模块按照页面关系分离。如answer页面,则有answer.css,answer/ask.css,answer/answer.css。然后通过import引用。

4,线上环境不应该使用@import,需要一个合并压缩工具。

 

参考的博客:MZhou's blog

 

 

 

 

分享到:
评论
3 楼 zhuwenlong00 2011-09-26  
则子标签为entry_counter 那子标签的子标签,孙标签呢?
2 楼 zhangyaochun 2011-09-26  
楼主可以看一下-----精通CSS高级Web标准解决方案
1 楼 zhangyaochun 2011-09-26  
如果你做过组件开发 你会发现所有的组件在渲染成html的时候多是一个组件绑定一个css的 所有支持按分离式的css绑定。。。。。。。但是个人感觉对于门户的设计思路好像不是那么简单

相关推荐

    使用Sass来编写面向对象的CSS代码

    OOCSS不同于其他组织CSS代码方法,比如SMACSS或者BEM。通过将CSS代码和结构分离让你的模块可重用。事实上,我也通常将SMACSS与OOCSS混为一谈。 OOCSS、SMACC和BEM在CSS中是很有内涵的东东,早就在W3cplus站点上有...

    如何组织和注释CSS文件

    关于如何组织和注释CSS文件,有很多方法,但是哪一种方法最好,却没有答案,这要靠你自己在工作中慢慢的去思考了.如果你有更好的方法请告诉大家让大家一起分享

    w3c最新的css2.0标准

    w3c组织的,最权威的标准,十分详细,有实例,详细的介绍了css使用的基本方法,技巧以及如何更好的使用css来美化你的网页。

    mosaic-css-grid:马赛克CSS Grid自动组织,其中有一堆大小不同的图像,找到了合适的位置

    1.是什么使网格组织得如此好? . mosaic { grid-auto-flow : dense; } 2.如何加入2个(或更多)网格单元? 在单元格所在的网格中: 1 2 3 4 5 6 7 8 假设我们选择第二个单元格: . mosaic div : nth-child ( 2...

    前端代码学习(HTML+CSS+JS进阶学习全资料)

    这份前端学习资料包含了深入学习HTML、CSS和JavaScript的所有必要资源。...CSS模块涵盖了CSS选择器和属性、各种布局技术,包括...为了帮助学习者更好地掌握知识,该资料还提供了学习路径和建议,以有组织地进行学习。

    CSS 代码质量提高的10条实用技巧

    回头去看自己写的CSS...1.保持代码井井有条 永远不要随随便便地想到一个id、class就一股脑把代码写下去,这样写出来的代码非常难维护也不好扩展,所以应该先考虑如何组织结构更加清晰的CSS代码,以便更好地利用CSS继

    HTML-CSS:基础HTML和CSS知识

    1999年:HTML4.01发布,同年,W3C对未来的展望,认为HTML存在一些缺陷,前途不是很光明,于是W3C转向语言更加规范的XML ,为了更好的实现HTML至XML的过渡,推出了XHTML。2000年:XHTML1.0发布。规定了所有元素,属性...

    论文研究 - 探索影响孟加拉国非政府组织(NGOs)员工满意度的因素:孟加拉国农村发展委员会(BRAC)的经验

    本文通过分析作为NGOs部门员工满意度(ES)前提的工作安全(JS),工作创新(JI),内部沟通... 该研究的这些结果与在孟加拉国工作的非政府组织的雇主应热心关注员工的满意因素以确保更好的绩效和生产力的结论相一致。

    advanced-css-course

    编写好HTML和CSS的三个Struts 响应式设计 可维护和可扩展的代码 网络性能 响应式设计 流体布局 媒体查询 响应式图像 正确的单位 桌面优先与移动优先 可维护和可扩展的代码 干净的 容易明白 生长 可重复使用的 如何...

    静态HTML明星主页 (HTML+CSS ,学生课程设计网页设计制作大作业)

    同时,通过本资源的学习与实践,学生可以更好地理解前端开发的基础知识,为未来的职业发展打下坚实的基础。 四、其他说明 本资源仅包含静态网页的源代码,不涉及动态交互功能。在使用过程中,学生可以根据自己的...

    最常用的五类CSS选择器

    一些新手朋友对选择器一知半解,不知道在什么情况下运用什么样的选择器,这是一个比较头疼的问题,针对新手朋友,对CSS选择器作一些简单的说明,希望能对大家的学习工作有一定的帮助,更多的CSS知识请参考Webjx.com...

    css-workshop

    在这个由三部分组成的研讨会中,您将学习如何使用最佳实践编写更好的 CSS。 我们将涵盖组织、编写可重用的 CSS、高级技术等。 ##日程 ####第1部分 规范化- 浏览器将以不同的方式呈现您的 CSS。 为避免这种...

    CSS预处理器Sass详解

    使用 Sass 以及 Sass 的样式库(如 Compass)有助于更好地组织管理样式文件,以及更高效地开发项目。 1. 特色功能 完全兼容 CSS3 在 CSS 基础上增加变量、嵌套 (nesting)、混合 (mixins) 等功能 通过函数进行颜色...

    horiseon-digital-marketing:该项目是“ HoriSEOn”营销机构现有网站的重构,以改善其可访问性,在html中组织其语义结构并在css中合并属性

    Horiseon数字营销该项目是“ HoriSEOn”市场营销机构现有网站的重构,以改善其可访问性,在html中组织其语义结构并在css中合并属性... 结果就是简化了CSS,从而使代码对其他程序员更高效,更友好,并且使网站性能更好。

    js-beginer-project1:这是一个基于基本 JS、CSS 和 HTML 的项目。 它对学习者非常有用。 在这里,您会发现实现了多个概念,以便您更好地理解

    在这里,您会发现实现了多个概念,以便您更好地理解。 HTML 添加多个标签以结构化的方式组织如何限制文本输入添加多个样式类等等CSS 如何进行基本造型添加外部样式表特性使用类添加样式使用标签名称添加样式如何...

    现代CSS进化史

    然而在一些大型工程中CSS的组织是一件复杂和凌乱的事情,你更改页面上任意一个元素的一行CSS样式都有可能影响到其他页面上的元素。为了解决CSS错综复杂的继承问题,开发者建立了各种不同的最佳实践,问题是哪一个...

    CodeRefactor-Horiseon:通过创建更多语义HTML并整合CSS来优化可访问性

    将<div> s重命名为<header> , <nav> , <main> , <section> , 和以获得更好的含义。 这也使我可以删除一些不必要的class名 为中的所有创建一个class 将中的的class重命名为相同 调整元素的可访问性 将背景图像从...

Global site tag (gtag.js) - Google Analytics