{"id":213,"date":"2018-06-13T10:34:17","date_gmt":"2018-06-13T10:34:17","guid":{"rendered":"http:\/\/codebean.co\/studiare\/2018\/06\/13\/designer-bag-bingo-new-choices-fundraiser-copy\/"},"modified":"2018-06-13T10:34:17","modified_gmt":"2018-06-13T10:34:17","slug":"its-wonderful-to-see-the-friendships-that-develop","status":"publish","type":"post","link":"https:\/\/esmetwp.com\/studiare\/2018\/06\/13\/its-wonderful-to-see-the-friendships-that-develop\/","title":{"rendered":"It\u2019s Wonderful to see the Friendships that Develop"},"content":{"rendered":"<p>CSS. It\u2019s a web designer\u2019s playpen. With so many colors, type settings, layout options, and responsive possibilities, it\u2019s easy to turn a stylesheet into a million line nightmare. However, with a few simple actions you can clean up the mess so the CSS works with you, not against you. A few weeks ago, frontend developer Julie Cameron came through our virtual Treehouse office and bestowed some wisdom we still can\u2019t shake. So now I\u2019m sharing it with you all!<\/p>\n<h3>It\u2019s only natural. Entanglement happens.<\/h3>\n<p>The cascade. It\u2019s a blessing and a curse. It\u2019s often the case that when you change the styling of one element, other elements inadvertently get restyled. Misuse of\u00a0!important\u00a0makes the cascade come to a screeching halt, and leaves you with inconsistencies from one element styling to the next. As websites get bigger or more developers start working on the codebase,<\/p>\n<blockquote><p>the CSS tends to grow as well. Without a plan, it becomes the Wild Wild West (<i>wickey wild, wicky wicky wild wild wild west<\/i>\u2026Will Smith isn\u2019t gonna get you out of this one).<\/p><\/blockquote>\n<ul>\n<li>Modular\u00a0\u2013 You can get to the point of building a page without writing a single line of CSS.<\/li>\n<li>Predictable\u00a0\u2013 It doesn\u2019t matter where you put the component, it\u2019ll behave the same and look the same. It\u2019s easy to write the code. You have systems in place for naming it. It\u2019s more intuitive to write.<\/li>\n<li>Maintainable\u00a0\u2013 It\u2019s quick and easy to deal with. It won\u2019t break other things on the site.<\/li>\n<li>Scalable\u00a0\u2013 It\u2019s hard to break and easy to build onto.<\/li>\n<li>Dry\u00a0\u2013 It eliminates the need for copy and paste duplication in the CSS.<\/li>\n<li>Organized\u00a0\u2013 There\u2019s a place for everything.<\/li>\n<\/ul>\n<p><strong>Separation of container from content<\/strong>\u00a0means that objects should look the same no matter where you put them. In other words, avoid location-dependent styles. For example, if you\u2019re styling an h2 like this\u2026<\/p>\n","protected":false},"excerpt":{"rendered":"<p>CSS. It\u2019s a web designer\u2019s playpen. With so many colors, type settings, layout options, and responsive possibilities, it\u2019s easy to turn a stylesheet into a million line nightmare. However, with&hellip;<\/p>\n","protected":false},"author":1,"featured_media":214,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"categories":[18,20],"tags":[24,29,30],"class_list":["post-213","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-business","category-design","tag-course","tag-theme","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/esmetwp.com\/studiare\/wp-json\/wp\/v2\/posts\/213","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/esmetwp.com\/studiare\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/esmetwp.com\/studiare\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/esmetwp.com\/studiare\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/esmetwp.com\/studiare\/wp-json\/wp\/v2\/comments?post=213"}],"version-history":[{"count":0,"href":"https:\/\/esmetwp.com\/studiare\/wp-json\/wp\/v2\/posts\/213\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/esmetwp.com\/studiare\/wp-json\/wp\/v2\/media\/214"}],"wp:attachment":[{"href":"https:\/\/esmetwp.com\/studiare\/wp-json\/wp\/v2\/media?parent=213"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/esmetwp.com\/studiare\/wp-json\/wp\/v2\/categories?post=213"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/esmetwp.com\/studiare\/wp-json\/wp\/v2\/tags?post=213"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}