![inherit font size inherit font size](https://support.exclaimer.com/hc/article_attachments/360015867531/mceclip0.png)
Therefore, what we need is a “system” to write CSS in a modular, flexible way to keep our CSS efficient and organised.Ī CSS methodology is a consistent set of naming conventions that a team of developers will follow to ensure they write consistent, reusable CSS that is scalable over time. Using classes to design various components and layouts on your website is inevitable (and where you’ll spend most of your time). Leveraging CSS inheritance rules and styling element selectors will only get you so far. I like to view this as setting up the core foundation of the styling in a project to give yourself a good base to begin styling components and building out more complex parts of your website. In some cases, it can remove the need to add custom classes, simplifying your CSS stylesheet and making it more scalable.no need to add classes to your HTML tags) Your HTML will be much cleaner, as the styles are applied natively to the HTML element selectors (i.e.Starting at the highest level, for the majority of websites, there will be styles that will be consistent across all of your HTML elements: When leveraged correctly, it can save you hundreds of lines of code in the long run. However, despite its well-understood nature, I believe the inheritance rule is often being underutilised. Inheritance in CSS allows us to define styles at a high level so that these styles can be trickled downstream and style descendant elements. Understanding inheritance in CSS might help. Technique 1: Leverage inheritance in CSSĭo you ever find yourself in CSS repeating a declaration, even though you know that you’ve used that declaration before?.Let’s dive into some actionable CSS techniques to help you write more modular & flexible code: How did things get so big?”ĬSS files can get out of control, pretty quickly. css files and in total, they’re over 10,000 lines of code.
Inherit font size how to#
How To Stop Writing Messy & Unscalable CSS