Downloaded 14 times
Uploaded byEd Charbeneau
Refactoring css
The document covers the process of refactoring CSS for improved maintainability, readability, and performance using tools like SASS and Compass. It discusses techniques such as semantic naming conventions, modular programming, and separating concerns between CSS and HTML. Additionally, it provides insights into specific code revisions, examples of reusable modules, and resources for further learning.
More Related Content
More from Ed Charbeneau
![UiPath Automation Suite Installation (Hands-On) [2/3]](https://cdn.slidesharecdn.com/ss_thumbnails/automationsuitecommunitysession2-251015095633-a6d862f1-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Refactoring css
- 2. Ed Charbeneau Sr. WebDeveloper for Sypris Solutions Code PaLOUsa Co-Chairman Author: Simple-Talk ResponsiveMVC.net Twitter: @EdCharbeneau Refactoring CSS
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9. Menu Day 5? Chicken SalsaSalad Sandwich Food Poisoning! Refactoring CSS
- 10. Cooking bad code Revision1 .menu .chicken { display: block } Refactoring CSS
- 11. Cooking bad code Revision1 .menu .chicken { display: block } Revision 2 .menu .chicken { float: left } Refactoring CSS
- 12. Cooking bad code Revision1 .menu .chicken { display: block } Revision 2 .menu .chicken { float: left } Revision 3 .menu .chicken { float: right } Refactoring CSS
- 13. Cooking bad code Revision1 .menu .chicken { display: block } Revision 2 .menu .chicken { float: left } Revision 3 .menu .chicken { float: right } Revision 4 .menu .chicken { float: none !important } //food poisoning Refactoring CSS
- 14. Maintainability & Readability Extensibility Improvingperformance Semantics Reasons to refactor
- 15. Maintainability & Readability Smaller,more concise chunks of code Semantic naming conventions We need to make it easier for others to read our code, and to understand the intention behind it. Refactoring CSS
- 16. Extensibility module Object Oriented Programming(OOP) Don’t Repeat Yourself (DRY) Modular programming & Portability Refactoring CSS
- 17. Improving Performance .min Reduce pageload times by reducing requests to the server request Refactoring CSS
- 18. Separation of Concerns(SoC), decoupling of CSS and HTML Semantic Layout CSS visual style HTML document layout article row Refactoring CSS
- 19.
- 20. Sass overview Sass code.SCSS is a superset of CSS CSS is valid SCSS Nesting Variables Mixins http://sass-lang.com/ Refactoring CSS
- 21. Converting CSS toSass Conversion tools Web Workbench Online http://css2sass.heroku.com/ Rename .css to .scss Refactoring CSS
- 22. Cleaning up withvariables // Color variables $base-color: #d0d0d0; $accent-color: #0ca0c6; $highlight-color: #FFF; $contrast-color: #1e1e1e; Refactoring CSS
- 23. Reusable modules withmixins @mixin button-base($margin: 2px, $padding: 10px) { color: $contrast-color; background-color: $base-color; text-decoration: none; display: block; padding:$padding; margin: $margin; &:hover { background-color: $highlight-color; } } Refactoring CSS
- 24. Cleaning up yourHTML with semantic styles <header id="master-header"> <div class=“row"> <h1 class="col third">Example</h1> <nav class="col two-thirds" id="primary"> Content… </nav> </div> </header> #master-header > div { @include row; h1 { @include column($third); } nav#primary { @include column($two-thirds); } } CSSHTML Refactoring CSS
- 25. module Prefixing an underscoreto a Sass file name tells Sass we intend to import the code as a module No .css file is generated by the compiler Partials and Imports Directory / Files /modules/_typography.scss /modules/_grid.scss Site.scss @import "modules/typography"; @import "modules/grid"; Refactoring CSS
- 27. Compass Overview Collection ofSass Mixins Common code that would otherwise be duplicated across other frameworks and extensions http://compass-style.org/ Refactoring CSS
- 28. Using Compass Replace standardboilerplate markup with Compass mixins Site.scss //removed @import "modules/reset"; @import "compass/reset"; Refactoring CSS
- 29. Finalizing the project .min Bundleand minify output_style = :compressed Refactoring CSS
- 30. Does refactoring makesense? Some projects may be too large or complex Practice refactoring with a smaller project first Apply the patterns to new projects
- 31.
- 32. Resources Reading – Refactoring CSSwith Sass and Compass – Using SASS and Compass in ASP.Net MVC with Web Workbench Code Samples – github.com/EdCharbeneau/RefactoringCSS/ (.NET MVC) – github.com/EdCharbeneau/RefactoringCSSWithSass (Platform independent) Tools – Web Workbench (Visual Studio Plugin) – Sass & Compass Refactoring CSS
Editor's Notes
- #4 Have you written CSS?
- #5 How about CSSS?I have a story that reminds me of how bad CSS is written. Before I was a web developer, I worked in manufacturing. Every day at lunch a food truck stopped by. A food truck we affectionately named “The Roach Coach”.
- #6 One week the Roach Coach had planned to serve chicken.On the first day, they sold plain chicken.
- #7 The next day the Roach Coach decided to serve left overs, so they put chicken on bread and made Chicken Sandwiches.
- #8 By the third day, they were still getting rid of leftovers, so they chopped up the chicken, added some dressing, and served Chicken Salad Sandwiches.
- #9 By day 4 things started got scary when they took their chicken salad sandwiches and decided re-serve the sandwiches again. This time they added salsa to the mix and changed the sticker to Chicken Salsa Sandwich.They even struck through “Salad” the old label, maybe to save money?
- #10 In my opinion, they could have just labeled them Food Poisoning.And what does all of this have to do with writing CSS?...
- #11 Developers do the same thing, we cook bad code.A project gets finished, the team moves on and “maintenance mode” begins.
- #12 For some reason, the code requires an update. So what is the easiest thing to do?Open the CSS file and override the styles by adding new code to the bottom.
- #13 And we do it over and over again.
- #14 Until we get food poisoning. (see: !important)
- #15 What can we do to fix this problem?
- #16 We need to make it easier for others to read our code, and to understand the intention behind it. Sass and Compass are preprocessors, and we can use them with CSS to provide semantic naming conventions for values (eg: $base-color) and dividing code into smaller, more concise, chunks. Sass allows us to use variables in place of literals to hold values, while Compass encapsulates common coding patterns. By using them, there is less code to maintain.
- #17 Familiar software development practices like OOP (object oriented programming) and DRY (don’t repeat yourself) are made possible by using Sass mixins. Mixins can be used to define styles of common UI elements with a modular approach so that they are portable within a project as well as in other projects.
- #18 You can certainly achieve better performance in page-loading by refactoring your CSS code but, unlike refactoring C#, VB, or JavaScript code, the benefits are more likely from decreasing the load time of the code rather than from increasing the execution (rendering) speed.
- #19 We will use refactoring to define a clear SoC (Separation of Concerns). HTML is responsible for describing the document, while the role of CSS is to provide a visual style. We can create a clear separation between HTML and CSS by writing styles that can be applied directly to HTML elements rather than through class attributes.
- #20 Read the article https://www.simple-talk.com/dotnet/asp.net/refactoring-css-with-sass-and-compass/ for more details.Follow commits on https://github.com/EdCharbeneau/RefactoringCSS for step by step techniques
- #22 Convert this using http://css2sass.heroku.comhttps://gist.github.com/EdCharbeneau/bb6a1846c55eb05ef2af
- #26 We can make our code more modular by using ‘partials’ and imports in order to separate code by its responsibilities. By modularizing the code, we can restructure our files so they are portable and easier to locate within a project.Partials are a naming convention that tells Sass that we do not wish to generate a .cssfile from the Sass code. Instead of generating a .css file for each module in our project, we will instead use the @import method.
- #27 Discover Sass & Compass ExtensionsFind the perfect tool for your next Sass or Compass project.http://www.sache.in/
- #31 Practice the techniques of refactoring with Sass on a smaller project first and learn a disciplined approach to writing DRY Sass code and understand better when modular code can be abstracted.