1. 首页
  2. IT资讯

前端开发技巧:CSS开发中的十不要!

“u003Cdivu003Eu003Cpu003Eu003Cstrongu003E1.不要滥用类u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E在有意义的地方使用ID而不要使用类。这是一个使得浏览器能够更快访问DOM元素的方法。u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp9.pstatp.comu002Flargeu002Fdfic-imagehandleru002F01a7933b-3002-4ef1-a984-e0dc0507fca8″ img_width=”1023″ img_height=”717″ alt=”前端开发技巧:CSS开发中的十不要!” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003Eu003Cstrongu003E2.不要把一切都扔进一个CSS文件中u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E分区CSS使其更易于管理。每一个CSS文件都可以分解成例如header.css、footer.css等逻辑组件。u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fdfic-imagehandleru002F449dfa79-fbac-46e5-84e7-bd3ba93f7507″ img_width=”680″ img_height=”1023″ alt=”前端开发技巧:CSS开发中的十不要!” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003Eu003Cstrongu003E3.不要命名选择器为“.red-with-green-dashed-lines”(红绿虚线)u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E根据页面上的组件命名你的选择器。u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002Fdfic-imagehandleru002F0f3ec194-2d51-408e-bafb-38cc0f1d88f3″ img_width=”1200″ img_height=”800″ alt=”前端开发技巧:CSS开发中的十不要!” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003Eu003Cstrongu003E4.不要忘记注释u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E注释在CSS中非常重要,可用来理解每个样式如何与其他样式关联以及什么颜色方案适用于哪些组件。u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fdfic-imagehandleru002Fa0ef421c-5ed1-41d4-beeb-0ba2697a4f06″ img_width=”1024″ img_height=”985″ alt=”前端开发技巧:CSS开发中的十不要!” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003Eu003Cstrongu003E5.不要害怕开发工具u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E现在的每个浏览器都有自己的一套开发工具,通常是按F12。这些工具在“调试CSS”时至关重要。u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fdfic-imagehandleru002Ffa9115c6-876d-4c18-a1d0-708048243fb7″ img_width=”1024″ img_height=”722″ alt=”前端开发技巧:CSS开发中的十不要!” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003Eu003Cstrongu003E6.不要害怕覆盖u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E当然,CSS框架,例如Bootstrap和Foundation都较为巨大,但每一个都需要根据你的需要做出一点调整。当你得到一个更新的框架时,它将覆盖你的改变。与其深入挖掘庞大的CSS文件,还不如创建一个bootstrap-overrides.css文件,按照你的意愿调整框架,只是…u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp9.pstatp.comu002Flargeu002Fdfic-imagehandleru002F3461351d-922c-48ce-aac1-a9376e81a961″ img_width=”1023″ img_height=”767″ alt=”前端开发技巧:CSS开发中的十不要!” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003Eu003Cstrongu003E7.不要滥用 !很重要u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003ECSS的整体思路是,从一个到另一个地“层叠”样式。 !重点是要记住排雷一样地踏遍所有早先的样式。u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E8.不要使用大量网络字体u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E这也是显而易见的,但有些人就是喜欢自己排版。只在网站上使用一个或两个(最多三个)网络字体,然后回归到浏览器默认设置,以保持网站的优化。u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp9.pstatp.comu002Flargeu002Fdfic-imagehandleru002Fa5124277-e4fb-447f-bd6a-07072b8bb183″ img_width=”1200″ img_height=”775″ alt=”前端开发技巧:CSS开发中的十不要!” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003Eu003Cstrongu003E9.不要手动编码所有的CSSu003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E为了保持CSS的DRY,可以使用CSS预处理程序例如LESS或SASS。使用这些预处理器的最大好处是,你可以定义变量。u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fdfic-imagehandleru002Fd459d6d3-5409-4eaf-badc-e5d801419ddb” img_width=”1024″ img_height=”576″ alt=”前端开发技巧:CSS开发中的十不要!” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003Eu003Cstrongu003E10.不要让CSS过于“臃肿”u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E空格会占用CSS文件的空间空间。由于我们都希望我们的CSS能够快速加载,因此在部署到网站之前使用CSS压缩工具来一次瘦身。 u003Cu002Fpu003Eu003Cu002Fdivu003E”

原文始发于:前端开发技巧:CSS开发中的十不要!

主题测试文章,只做测试使用。发布者:℅傍ㄖ免沦陷dε鬼,转转请注明出处:http://www.cxybcw.com/11336.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code