{"id":214,"date":"2009-11-28T01:19:59","date_gmt":"2009-11-27T23:19:59","guid":{"rendered":"http:\/\/www.4webs.es\/blog\/?p=214"},"modified":"2017-12-05T09:34:58","modified_gmt":"2017-12-05T08:34:58","slug":"escribir-codigo-css-correctamente","status":"publish","type":"post","link":"https:\/\/www.4webs.es\/blog\/escribir-codigo-css-correctamente","title":{"rendered":"Escribir c\u00f3digo css correctamente"},"content":{"rendered":"<div class=\"row\"><div class=\"col-md-11 content-article\"><p>Normalmente cuando vemos c\u00f3digos css de algunas p\u00e1ginas, cada dise\u00f1ador o maquetador lo hace de una manera diferente, pero deberiamos seguir una reglas b\u00e1sicas a la hora de escribir nuestro c\u00f3digo css, aqu\u00ed os dejo algunos consejos para que vuestro c\u00f3digo sea m\u00e1s correcto.<\/p>\n<p>1.-Se recomienda mantener siempre las declaraciones CSS en una sola l\u00ednea, para mantener tu archivo CSS limpio y m\u00e1s peque\u00f1o.<\/p>\n<p><strong>Correcto<\/strong><\/p>\n<pre lang=\"css\">h2 {font-size:18px; color:#333333; background:#cccccc; }<\/pre>\n<p><strong>Incorrecto<\/strong><\/p>\n<pre lang=\"css\">h2 \r\n{\r\n font-size:18px;\r\n color: #333333;\r\n background: #cccccc; \r\n}\r\n<\/pre>\n<p>2.-Combinar elementos<\/p>\n<p>Una de la mejor manera de ahorrar l\u00edneas de c\u00f3digo es mediante la agrupaci\u00f3n de selectores.<\/p>\n<p><strong>Correcto<\/strong><\/p>\n<pre lang=\"css\">h1, h2, h3 {\r\nfont-family: Arial, Helvetica, sans-serif; color:#333;\r\n }\r\n<\/pre>\n<p><strong>Incorrecto<\/strong><\/p>\n<pre lang=\"css\">h1 {\r\nfont-family: Arial, Helvetica, sans-serif; color:#333; \r\n}\r\nh2 {\r\nfont-family: Arial, Helvetica, sans-serif; color:#333;\r\n }\r\nh3 {\r\nfont-family: Arial, Helvetica, sans-serif; color:#333;\r\n }\r\n<\/pre>\n<p>3.-Usar \u00abMargin\u00bb para centrar el layout<\/p>\n<pre lang=\"css\">#Container { margin:0 auto; \/* top, bottom - and left, right*\/ width:xxxpx;  }\r\n<\/pre>\n<p>4.-Comentar tu CSS<br \/>\nEs muy importante comentar tu CSS, posiblemente al cabo de un a\u00f1o o meses, un cliente te puede pedir modificaciones en la p\u00e1gina web, sino lo tenemos comentado, nos ser\u00e1 bastante dificil encotrar las clases que estabamos usando.<\/p>\n<pre lang=\"css\">\/******** CODE START HERE ********\/\r\n<\/pre>\n<p>5.-Prueba a usar herramientas de optimizaci\u00f3n de c\u00f3digo css<\/p>\n<ul>\n<li>Css Tidy<\/li>\n<li>Clean Css<\/li>\n<li>Css Optimiser<\/li>\n<li>Flumpcakes Css optimizer<\/li>\n<li>cssdrive Css Comperasor<\/li>\n<li>W3C Css Validator<\/li>\n<\/ul>\n<\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>Aprendemos a escribir c\u00f3digo CSS de manera correcta para evitar que exista \u00abc\u00f3digo sucio\u00bb y nos entorpezca en el momento en el que las reglas funcionen<\/p>\n","protected":false},"author":1,"featured_media":8741,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":{"0":"post-214","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-recursos-web"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Escribir c\u00f3digo css correctamente | 4webs.es<\/title>\n<meta name=\"description\" content=\"Aprendemos a escribir c\u00f3digo CSS de manera correcta para evitar que exista &quot;c\u00f3digo sucio&quot; y nos entorpezca en el momento en el que las reglas funcionen\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.4webs.es\/blog\/escribir-codigo-css-correctamente\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Escribir c\u00f3digo css correctamente | 4webs.es\" \/>\n<meta property=\"og:description\" content=\"Aprendemos a escribir c\u00f3digo CSS de manera correcta para evitar que exista &quot;c\u00f3digo sucio&quot; y nos entorpezca en el momento en el que las reglas funcionen\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.4webs.es\/blog\/escribir-codigo-css-correctamente\" \/>\n<meta property=\"og:site_name\" content=\"4webs\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/4webs\" \/>\n<meta property=\"article:published_time\" content=\"2009-11-27T23:19:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-12-05T08:34:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.4webs.es\/blog\/wp-content\/uploads\/2009\/11\/escribir-codigo-css-correctamente.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"840\" \/>\n\t<meta property=\"og:image:height\" content=\"440\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Pablo Risue\u00f1o\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@4webs\" \/>\n<meta name=\"twitter:site\" content=\"@4webs\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Pablo Risue\u00f1o\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minuto\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/escribir-codigo-css-correctamente#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/escribir-codigo-css-correctamente\"},\"author\":{\"name\":\"Pablo Risue\u00f1o\",\"@id\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/#\\\/schema\\\/person\\\/fc07e8cecb1e51ce56b131a1eb0b3048\"},\"headline\":\"Escribir c\u00f3digo css correctamente\",\"datePublished\":\"2009-11-27T23:19:59+00:00\",\"dateModified\":\"2017-12-05T08:34:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/escribir-codigo-css-correctamente\"},\"wordCount\":180,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/escribir-codigo-css-correctamente#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/wp-content\\\/uploads\\\/2009\\\/11\\\/escribir-codigo-css-correctamente.jpg\",\"articleSection\":[\"Recursos Web\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.4webs.es\\\/blog\\\/escribir-codigo-css-correctamente#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/escribir-codigo-css-correctamente\",\"url\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/escribir-codigo-css-correctamente\",\"name\":\"Escribir c\u00f3digo css correctamente | 4webs.es\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/escribir-codigo-css-correctamente#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/escribir-codigo-css-correctamente#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/wp-content\\\/uploads\\\/2009\\\/11\\\/escribir-codigo-css-correctamente.jpg\",\"datePublished\":\"2009-11-27T23:19:59+00:00\",\"dateModified\":\"2017-12-05T08:34:58+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/#\\\/schema\\\/person\\\/fc07e8cecb1e51ce56b131a1eb0b3048\"},\"description\":\"Aprendemos a escribir c\u00f3digo CSS de manera correcta para evitar que exista \\\"c\u00f3digo sucio\\\" y nos entorpezca en el momento en el que las reglas funcionen\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/escribir-codigo-css-correctamente#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.4webs.es\\\/blog\\\/escribir-codigo-css-correctamente\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/escribir-codigo-css-correctamente#primaryimage\",\"url\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/wp-content\\\/uploads\\\/2009\\\/11\\\/escribir-codigo-css-correctamente.jpg\",\"contentUrl\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/wp-content\\\/uploads\\\/2009\\\/11\\\/escribir-codigo-css-correctamente.jpg\",\"width\":840,\"height\":440},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/escribir-codigo-css-correctamente#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.4webs.es\\\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Escribir c\u00f3digo css correctamente\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/\",\"name\":\"4webs\",\"description\":\"Desarrollo con Prestashop, gesti\u00f3n de proyectos ecommerce\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/#\\\/schema\\\/person\\\/fc07e8cecb1e51ce56b131a1eb0b3048\",\"name\":\"Pablo Risue\u00f1o\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6938f7637a533914c144759f6249310d5f8fdef83738a4641b2d151a17c19f97?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6938f7637a533914c144759f6249310d5f8fdef83738a4641b2d151a17c19f97?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6938f7637a533914c144759f6249310d5f8fdef83738a4641b2d151a17c19f97?s=96&d=mm&r=g\",\"caption\":\"Pablo Risue\u00f1o\"},\"sameAs\":[\"http:\\\/\\\/www.4webs.es\"],\"url\":\"https:\\\/\\\/www.4webs.es\\\/blog\\\/author\\\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Escribir c\u00f3digo css correctamente | 4webs.es","description":"Aprendemos a escribir c\u00f3digo CSS de manera correcta para evitar que exista \"c\u00f3digo sucio\" y nos entorpezca en el momento en el que las reglas funcionen","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.4webs.es\/blog\/escribir-codigo-css-correctamente","og_locale":"es_ES","og_type":"article","og_title":"Escribir c\u00f3digo css correctamente | 4webs.es","og_description":"Aprendemos a escribir c\u00f3digo CSS de manera correcta para evitar que exista \"c\u00f3digo sucio\" y nos entorpezca en el momento en el que las reglas funcionen","og_url":"https:\/\/www.4webs.es\/blog\/escribir-codigo-css-correctamente","og_site_name":"4webs","article_publisher":"https:\/\/www.facebook.com\/4webs","article_published_time":"2009-11-27T23:19:59+00:00","article_modified_time":"2017-12-05T08:34:58+00:00","og_image":[{"width":840,"height":440,"url":"https:\/\/www.4webs.es\/blog\/wp-content\/uploads\/2009\/11\/escribir-codigo-css-correctamente.jpg","type":"image\/jpeg"}],"author":"Pablo Risue\u00f1o","twitter_card":"summary_large_image","twitter_creator":"@4webs","twitter_site":"@4webs","twitter_misc":{"Escrito por":"Pablo Risue\u00f1o","Tiempo de lectura":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.4webs.es\/blog\/escribir-codigo-css-correctamente#article","isPartOf":{"@id":"https:\/\/www.4webs.es\/blog\/escribir-codigo-css-correctamente"},"author":{"name":"Pablo Risue\u00f1o","@id":"https:\/\/www.4webs.es\/blog\/#\/schema\/person\/fc07e8cecb1e51ce56b131a1eb0b3048"},"headline":"Escribir c\u00f3digo css correctamente","datePublished":"2009-11-27T23:19:59+00:00","dateModified":"2017-12-05T08:34:58+00:00","mainEntityOfPage":{"@id":"https:\/\/www.4webs.es\/blog\/escribir-codigo-css-correctamente"},"wordCount":180,"commentCount":0,"image":{"@id":"https:\/\/www.4webs.es\/blog\/escribir-codigo-css-correctamente#primaryimage"},"thumbnailUrl":"https:\/\/www.4webs.es\/blog\/wp-content\/uploads\/2009\/11\/escribir-codigo-css-correctamente.jpg","articleSection":["Recursos Web"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.4webs.es\/blog\/escribir-codigo-css-correctamente#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.4webs.es\/blog\/escribir-codigo-css-correctamente","url":"https:\/\/www.4webs.es\/blog\/escribir-codigo-css-correctamente","name":"Escribir c\u00f3digo css correctamente | 4webs.es","isPartOf":{"@id":"https:\/\/www.4webs.es\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.4webs.es\/blog\/escribir-codigo-css-correctamente#primaryimage"},"image":{"@id":"https:\/\/www.4webs.es\/blog\/escribir-codigo-css-correctamente#primaryimage"},"thumbnailUrl":"https:\/\/www.4webs.es\/blog\/wp-content\/uploads\/2009\/11\/escribir-codigo-css-correctamente.jpg","datePublished":"2009-11-27T23:19:59+00:00","dateModified":"2017-12-05T08:34:58+00:00","author":{"@id":"https:\/\/www.4webs.es\/blog\/#\/schema\/person\/fc07e8cecb1e51ce56b131a1eb0b3048"},"description":"Aprendemos a escribir c\u00f3digo CSS de manera correcta para evitar que exista \"c\u00f3digo sucio\" y nos entorpezca en el momento en el que las reglas funcionen","breadcrumb":{"@id":"https:\/\/www.4webs.es\/blog\/escribir-codigo-css-correctamente#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.4webs.es\/blog\/escribir-codigo-css-correctamente"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.4webs.es\/blog\/escribir-codigo-css-correctamente#primaryimage","url":"https:\/\/www.4webs.es\/blog\/wp-content\/uploads\/2009\/11\/escribir-codigo-css-correctamente.jpg","contentUrl":"https:\/\/www.4webs.es\/blog\/wp-content\/uploads\/2009\/11\/escribir-codigo-css-correctamente.jpg","width":840,"height":440},{"@type":"BreadcrumbList","@id":"https:\/\/www.4webs.es\/blog\/escribir-codigo-css-correctamente#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.4webs.es\/blog"},{"@type":"ListItem","position":2,"name":"Escribir c\u00f3digo css correctamente"}]},{"@type":"WebSite","@id":"https:\/\/www.4webs.es\/blog\/#website","url":"https:\/\/www.4webs.es\/blog\/","name":"4webs","description":"Desarrollo con Prestashop, gesti\u00f3n de proyectos ecommerce","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.4webs.es\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.4webs.es\/blog\/#\/schema\/person\/fc07e8cecb1e51ce56b131a1eb0b3048","name":"Pablo Risue\u00f1o","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/6938f7637a533914c144759f6249310d5f8fdef83738a4641b2d151a17c19f97?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/6938f7637a533914c144759f6249310d5f8fdef83738a4641b2d151a17c19f97?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6938f7637a533914c144759f6249310d5f8fdef83738a4641b2d151a17c19f97?s=96&d=mm&r=g","caption":"Pablo Risue\u00f1o"},"sameAs":["http:\/\/www.4webs.es"],"url":"https:\/\/www.4webs.es\/blog\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/www.4webs.es\/blog\/wp-json\/wp\/v2\/posts\/214","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.4webs.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.4webs.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.4webs.es\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.4webs.es\/blog\/wp-json\/wp\/v2\/comments?post=214"}],"version-history":[{"count":7,"href":"https:\/\/www.4webs.es\/blog\/wp-json\/wp\/v2\/posts\/214\/revisions"}],"predecessor-version":[{"id":8742,"href":"https:\/\/www.4webs.es\/blog\/wp-json\/wp\/v2\/posts\/214\/revisions\/8742"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.4webs.es\/blog\/wp-json\/wp\/v2\/media\/8741"}],"wp:attachment":[{"href":"https:\/\/www.4webs.es\/blog\/wp-json\/wp\/v2\/media?parent=214"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.4webs.es\/blog\/wp-json\/wp\/v2\/categories?post=214"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.4webs.es\/blog\/wp-json\/wp\/v2\/tags?post=214"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}