Writing maintainable CSS - DEV Community.
Write CSS without worrying that overzealous, pre-existing styles will cause problems. MaintainableCSS is an approach to writing modular, scalable and maintainable CSS. “A handy little read on learning how to write modular and maintainable CSS.” Smashing Magazine “Finally a good book on how to write maintainable CSS.” Alexander Dajani.
Ideally, you shouldn't be importing crap CSS in the first place. Generalization is generally bad, so avoid it when possible. You aren't writing a framework; you're writing an application. The chance that your application code and styles are going to be reused elsewhere is extremely low in reality.
Writing maintainable CSS means reducing the number of possible error sources. Preprocessors make change harder Unfortunately preprocessors don’t do anything to reduce the list of possible error sources. Quite the opposite, they add more global state, complexity and inheritance to the mix.
I am just starting to explore this area and wonder what are the best practices when it comes to production of clean, well-structured and maintainable CSSes. There seems to be few different approac.
In each chapter, you will learn the best way to write maintainable CSS with explanation and examples provided. You will able to learn why we use class name instead of ID, what are module and component and etc. This online e-book are available for free, be sure to bookmark and learn all the goodies from the author. Read Maintainable CSS. TAGS: CSS.
MaintainableCSS is an approach to architecting and writing CSS that helps you and your team write modular, scalable and maintainable code. In practical terms, this means that as a developer I want to create new features, or edit existing features without having to concern myself with overriding styles I don’t want applied, or worse that the code I write causes regression elsewhere.
Learning outcomes: by the end of this course, you'll be able to. Identify how to use BEM selectors, CSS preprocessors, and Sass to structure your code. Apply Sass variables, mixins, extensions, and functions to improve a codebase. Identify advanced Sass techniques for creating a responsive, browser-friendly website.
Learn how to know when to implement a css framework. Implement the principles of modular design in your styles. Uses relative units and almost never pixels. (vw, vh, em, rem, %) Decompose your html, reuse components, modular design in your html, having a scalable css means having a scalable html.
If we have written a maintainable CSS, updating some minor changes to our repository will not be a daunting one like 1) changing the value for a variable, 2) changing a class name, 3) identifying which modules are written in which section of the code and locate where is the specific line comes from.
In the previous chapters, we learned about a wide variety of different aspects of HTML5 and CSS3, including everything you need to know as a beginner to.
The majority of Sass syntax is the same as CSS. Within a very short time you can learn the few things that are different and be writing Sass code that compiles into CSS. You can then learn the rest of Sass one feature at a time as you need or want. If you’ve ever wished CSS could do more, Sass is for you.
How to write maintainable CSS declarations Why is the order of the CSS declarations important? Let’s cover the basics first. A CSS declaration is made up of a selector, or a group of selectors, and a declaration block. Inside of the declaration block, there are declarations with properties and values.
How to write maintainable and efficient CSS3 animation effects 09 Oct 2012 by David Corvoysier. CSS3 animation effects are now available in most recent browsers, and with decent performances thanks to hardware acceleration: now is a good time to start adding those fancy visual effects you've ever been dreaming of to your web site.
