业内很多同学说撸CSS是最没技术含量的，但业内能撸好CSS的并不多见。
想说的是：
Unlike a programming language that requires knowledge of loops, variables, and other concepts, CSS is pretty easy to pick up. Maybe it’s because of this that it has gained the reputation of being simple. It is simple in the sense of “not complex”, but that doesn’t mean it’s easy. Mistaking “simple” for “easy” will only lead to heartache. -- by @ Jeremy Keith
这就是为什么写得好CSS不多见。
而对于Web页面和Web应用而言，他的构层主要由HTML、CSS和JavaScript。其中HTML和CSS的关系又是紧密相连：
简单地说：
- HTML的DOM树会直接影响你CSS选择器的使用
- HTML的元素命名也会直接影响你CSS选择器的使用
那么首要解决的问题就是写好HTML结构，写好HTML结构，写好HTML结构；定义好的类名，定义好的类名，定义好的类名。
怎么做到呢？徒手撸出类似Bootstrap的HTML：
比如写个Button:
就我个人而言，HTML结构都喜欢写成Bootstrap这种。
另外就是在写组件或者HTML结构时还可以参照 "Accessible Rich Internet Applications "规范中的Widget部分：
Accessible Rich Internet Applications (WAI-ARIA) 1.1www.w3.org
另外，还可以参考一些优秀的网站，Frameworks,库。这样可以提高自己在HTML方面的能力，比如结构的管理，类名命名。更多的话可以阅读一些关于HTML语义化的文章。
回到CSS上来。很多撸CSS的同学常常会犯的问题：
- 选择器运用不好
- 属性了解不够到位
- 不够成体系
- 实现思路不好
- 眼界不广
- 不知道借助工具
- 等等
选择器运用不好
选择器的使用在CSS中绝对算是重中之重。CSS发展到目前为止，选择器已经非常的成熟了，可以实现很多类似于早期jQuery的选择器功能。
如果前期的HTML写的足够好，在选择器定位到目标元素时就会变得较为轻松，而且可读性也会较强。很同学用不好选择器，除了不知道怎么用之外，还有一个更重要的原因，选择器权重不理解。
所以说，要用好选择器，就需要知道 CSS选择器是怎么一回事，CSS选择器权重如何计算
有关于选择器相关的教程网上也很多，这里列几篇：
CSS3 选择器--基本选择器_css3选择器, 基本选择器, CSS选择器 教程_w3cpluswww.w3cplus.com
CSS3 选择器--属性选择器_css3选择器, 属性选择器, CSS选择器 教程_w3cpluswww.w3cplus.com
CSS3 选择器--伪类选择器_css3选择器, 伪类选择器, CSS选择器 教程_w3cpluswww.w3cplus.com
CSS选择器的优化_基本选择器, CSS选择器 教程_w3cpluswww.w3cplus.com
再聊CSS的属性选择器_CSS, CSS选择器 教程_w3cpluswww.w3cplus.com
初探CSS 选择器Level 4www.w3cplus.com
你应该知道的一些事情--CSS权重_CSS选择器 教程_w3cpluswww.w3cplus.com
使用CSS Mod Queries控制选择器范围www.w3cplus.com
属性了解不到位
CSS的属性事实上并不是非常的复杂，但他们的组合就会让很多人感到头痛了。如果希望不头痛就需要对CSS的属性有所了解。建议可以从相关规范中获取：
All Standards and Draftswww.w3.org
而CSS中较为重要的几个功能模块：
选择器模块：
盒模型
CSS Box Model Module Level 3www.w3.org
特别是逻辑盒模型的出现，将会让很多CSSer更为头痛，拿下图来对比一下：
CSS的逻辑属性对盒模型带来的变化_CSS, CSS逻辑属性 教程_w3cpluswww.w3cplus.com
布局模块：
CSS Flexible Box Layout Module Level 1www.w3.org
CSS Inline Layout Module Level 3www.w3.org
CSS Grid Layout Module Level 2www.w3.org
CSS Multi-column Layout Module Level 1www.w3.org
CSS Layout API Level 1www.w3.org
Layout_入门 精通 教程_w3cpluswww.w3cplus.com
值、单位和颜色
CSS Values and Units Module Level 4www.w3.org
CSS Values and Units Module Level 3www.w3.orgCSS Color Module Level 3www.w3.org
图解CSS：CSS 的值和单位_CSS, 图解CSS, 长度单位 教程_w3cpluswww.w3cplus.com
定位
CSS Positioned Layout Module Level 3www.w3.org
position_入门 精通 教程_w3cpluswww.w3cplus.com
层叠和继承
图解CSS：CSS层叠和继承_CSS, 图解CSS 教程_w3cpluswww.w3cplus.com
聊聊CSS中的层叠相关概念_CSS, z-index, BFC 教程_w3cpluswww.w3cplus.com
transform/transition/animation相关的
CSS Transforms Module Level 1www.w3.org
CSS Transitionswww.w3.org
CSS Animations Level 1www.w3.org
https://www.w3cplus.com/blog/tags/95.htmlwww.w3cplus.com
transition_入门 精通 教程_w3cpluswww.w3cplus.com
Web动画_入门 精通 教程_w3cpluswww.w3cplus.com
另外还有比较新的，比如：
- CSS混合模式和滤镜
- CSS绘制图形
- CSS自定义属性
- 不一一列出
看到这些，估计为什么写不出好的CSS有一定的原因所在了。刚才也说过，同样一个效果，可能会有N种组合方式，甚至 同一个人在不同时间写同一个效果都会有N种组合方式。因为CSS就是一种七巧板
不够成体系
其实写CSS还是有很多方法论的，比如有名的：
- OOCSS
- SMACSS
- Atomic Design
除了前面提到的，还有其他的类似方法，比如BEM、SUITCSS、MCSS、AMCSS等。
借助这些优秀的方法论，可以让你的CSS变得更优雅些：
CSS架构_入门 精通 教程_w3cpluswww.w3cplus.com
借助工具来帮你
到目前为止，写CSS不仅仅局限于CSS，可以使用一些CSS处理器或其他的工具来帮更简单的写CSS。
平时也可以收集一些帮你撸码的利器
tools_入门 精通 教程_w3cpluswww.w3cplus.com
眼界不够高
眼界不够高，看得少。这方面很简单，自己多看，多写。比如Codepen就是一个很好的地方：
今天就写到这，感觉好长了.....
最后放上早期的一篇分享：
写CSS的姿势_CSS 教程_w3cpluswww.w3cplus.com
再给CSSer推荐学习CSS的好去处：
CSS-Trickscss-tricks.com
CSS3_入门 精通 教程_w3cpluswww.w3cplus.com
张鑫旭-鑫空间-鑫生活www.zhangxinxu.com
ChokCoco - 博客园www.cnblogs.com
另外推荐几本CSS的书
扫一扫
1023
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
