Software DeveloperProgrammingWriting CodeDevelopment EnvironmentSource ControlDebuggingCode QualityRefactoringDesign PrinciplesDesign PatternsProgramming FundamentalsAPILanguagesDSLsRecursionComputer ScienceApplications of CSMachine LearningComputer NetworkingOperating SystemsComputer EngineeringRoboticsCS TheoryData StructuresDatabase SystemsComputational ComplexityInformation TheoryCryptographyCompressionWeb DevelopmentThe InternetTCPIPHTTPHostingCDNServerAJAXFrontendMaking WebsitesMaking Web AppsRESTSEOHTMLCSSCSS PreprocessorsCSS FrameworksCSS MethodologiesCSS ResetCMSSSGWeb DesignResponsive DesignVisual DesignUX DesignJavascriptDOMES6JQueryMVCBackendServer StackDev OpsCloud

CSS Methodologies

What it is

CSS methodologies are ways of approaching how to write clean, maintainable and reusable CSS. Where a style guide might nitpick on indenting with spaces vs tabs, a good methodology provides a comprehensive approach about how to architect CSS so that won’t make your life a living hell.

Some popular methodologies include Block Element Modifier (BEM) style naming, Object Oriented CSS (OOPCSS), SUITCSS, and Scalable and Modular Architecture for CSS (SMACSS), to name a few.

Why it matters

Anyone who has worked with CSS on a large project will tell you that it can become very difficult to manage after a while. CSS selectors are quite permissive in how they let you apply styling to elements, and it can quickly get you into trouble.

With no specific guidelines about how to use selectors, most beginners will make their rules too broad, like using an “h1” selector to style the big header at the top of the page without thinking about how it will affect them down the road when they want to add new h1 elements on other pages.

After a while, it becomes difficult to tell which rules will apply to new html content, and you have to start using progressively more and more specific CSS rules to make the changes you need. This makes it hard to change the structure of the HTML without totally breaking the layout, makes it hard to remove dead CSS code, and generally turns the whole thing into a brittle, unmaintainable mess.

To combat this, best practices have emerged over time to help developers write more consistent and maintainable CSS by applying general software design principles like DRY along with naming conventions and other guidelines.

How to learn it

Rather than learning a solution looking for a problem, make sure you deeply understand the motivations behind techniques like BEM so that you can appreciate how it will help you make your code better.

To start, check out the link dump in the architecture section of the "awesome CSS” repo.

SMACSS is the seminal text in this area, and is a free online book that can be read in a couple of hours.