Key Takeaways
- CSS remains a relevant and integral part of web development, despite the emergence of new trends and technologies. Its continued use is supported by its ability to separate style definitions from markup, its speed, its responsiveness, and its wide adoption across modern browsers and platforms.
- There are valid arguments against CSS, but these criticisms are seen as opportunities for improvement and future development of CSS. The continued evolution of CSS will likely be influenced by these current challenges.
- There are multiple ways to implement CSS today, from manual implementation to the use of extensions or frameworks. The choice depends on various factors, including project requirements, browser/platform support, developer skill levels, and performance priorities.
- Despite the challenges and criticisms, CSS continues to be the dominant technology for styling the web due to its history, active presence, and continued development. It is a crucial part of modern web development, providing advanced features and techniques for creating responsive, interactive, and visually appealing websites.
Is CSS Relevant Today?
For many web developers, the notion of questioning the relevance of CSS may seem odd. However new trends in web development have put in question the use of CSS. I strongly consider reading the article by Louis Lazaris, who presents the case that CSS is alive and well. Although most of his article provides insight into why CSS is still quite alive, he also mentioned the popularity of React, which uses inline styling via JavaScript. He also references an article regarding the debate around “do we even need CSS anymore?” which does a good job explaining some of the pain points developers have faced when implementing CSS. I am referencing these articles because they provide context for the challenges CSS developers face, and why some have considered other alternatives. So does that mean CSS is trending down? As the opening words of this article clearly show, there is momentum in the field of CSS. The major browsers out there are still working hard to implement CSS features, and the passionate developer community is working hard to continue making great websites with CSS. Think of the innumerable blogging sites using WordPress which of course uses CSS to complement theming. With a strong foundation and active community, CSS is very relevant today. What about the valid arguments against CSS? While I will not be addressing them here, I am happy to see the ‘uproar’ and some turning toward alternatives. Why? Because it is healthy for the community to challenge how things are done so that there is opportunity for improvement. It is my humble opinion that the CSS of the future will be molded by the very complaints against it today.Simple CSS Truths
In our modern world, I find it is good to pause and question why we are doing what we do. In the spirit of questioning my personal continued use of CSS, I wanted to come up with evidence of why I should still care to do so. Below is a list of statements I concluded (with the help of others) that add weight to why CSS continues to be my dominate choice for styling with web technologies: CSS allows for separation of concerns. CSS is a complementary language to HTML, enabling style definitions to be maintained separately from the markup. Cleaner markup is easier to read and maintain, and is typically easier to crawl by search. CSS is fast. It is fast in many ways. Faster to make style changes, faster for HTML pages to load that aren’t riddled with duplicate inline styles, and typically faster to process than JavaScript in cases like transitions and animations. CSS is responsive. CSS enables the best viewing of content based on viewing dimensions or how it should be rendered if printed, to name just a couple of examples. CSS has a captive audience. There is no shortage of books, videos, articles, and websites centering on CSS. And there is a growing list of libraries/tools/frameworks dedicated to make CSS implementation easier and more efficient. CSS is everywhere. Modern browsers embrace CSS, and a list of features supported by each is maintained at sites such as CanIUse.com (see comment below). CSS is also used to style mobile apps found across multiple platforms when packaged using services like ManifoldJS or Cordova. Regarding the status of CSS across browsers, a more accurate gauge for determining what features are currently supported or in development can be obtained by consulting directly with each specific vendor. For example, check out the platform status section at dev.modern.ie for the CSS roadmap regarding Microsoft Edge.Using CSS Today
There are multiple ways to implement CSS today. There is no single method that is perfect for all scenarios, since different projects will have varying needs and constraints. Questions that would contribute toward determining an approach include: What features of CSS does the project require? What browsers/platforms does my project need to support? How many developers will be contributing to project, and what are their skill levels? Are the fastest response times a high priority? After considering the questions above, it is now time to look at what approaches are out there. The combination of possibilities is high, so I will break it down to these two general terms: Manual implementation and maintenance of CSS. Simply put, the developer is responsible for all aspects of CSS. CSS with the help of extensions/frameworks. Developer depends on an extension or framework to help write efficient CSS and/or to publish a minified file. The types of extensions/frameworks are varied, and many of them have dependencies on one or more of the others. While the second approach is clearly trending in adoption, it doesn’t mean it is always the answer. For example, a small intranet site with a predictable audience in terms of browsers/devices might appear over-engineered to implement multiple CSS frameworks – especially if the site had a small number of pages. Would minifying files be critical in such a scenario? Would it take more time for developers to set up the frameworks and learn them than to just write the site? A manual implementation of a single CSS page may be all that is needed. The reality is many sites will be a lesser or stronger degree of the second approach. For example, a developer savvy with CSS may have excellent skills but relies on tooling for minifying files. Another example is using a full framework like Bootstrap , and purchasing themes to quickly get a site up and running. Another example may be the use of W3.CSS for simple responsive styling. To the degree any dependency will help (not hurt) the overall project, it should be strongly considered for use.Summary
CSS has a history, an active presence, and a continued future in web development. While there are challenges to implementing CSS, there are also many reasons why it continued to be the reigning technology for styling the web. This article focused on the role of CSS in our modern world. Upcoming articles in the Mastering CSS Series will cover best practices, top tips, and a deeper look into extensions and frameworks!More hands-on with Web Development
This article is part of the web development series from Microsoft tech evangelists and engineers on practical JavaScript learning, open source projects, and interoperability best practices including Microsoft Edge browser and the new EdgeHTML rendering engine. We encourage you to test across browsers and devices including Microsoft Edge – the default browser for Windows 10 – with free tools on dev.microsoftedge.com:- Scan your site for out-of-date libraries, layout issues, and accessibility
- Download free virtual machines for Mac, Linux, and Windows
- Check Web Platform status across browsers including the Microsoft Edge roadmap
- Remotely test for Microsoft Edge on your own device
- Coding Lab on GitHub: Cross-browser testing and best practices
- Microsoft Edge Web Summit 2015 (from our engineering team and JS community)
- Woah, I can test Edge & IE on a Mac & Linux! (from Rey Bango)
- Advancing JavaScript without Breaking the Web (from Christian Heilmann)
- The Edge Rendering Engine that makes the Web just work (from Jacob Rossi)
- Unleash 3D rendering with WebGL (from David Catuhe)
- Hosted web apps and web platform innovations (from Kevin Hill and Kiril Seksenov)
- vorlon.JS (cross-device remote JavaScript testing)
- manifoldJS (deploy cross-platform hosted web apps)
- babylonJS (3D graphics made easy)
Frequently Asked Questions about Modern CSS
What is the significance of modern CSS in today’s web development?
Modern CSS plays a crucial role in today’s web development. It provides developers with advanced features and techniques that make it easier to create responsive, interactive, and visually appealing websites. With modern CSS, developers can control layouts, colors, fonts, and animations more effectively. It also allows for better compatibility across different browsers and devices, improving the overall user experience.
How does modern CSS differ from traditional CSS?
Traditional CSS was limited in its capabilities, often requiring additional JavaScript or other workarounds for more complex designs. Modern CSS, on the other hand, introduces new properties and values that offer more control and flexibility. For instance, Flexbox and Grid layout systems, CSS variables, and animation properties are some of the features that modern CSS brings to the table.
What are some of the best practices for writing modern CSS?
Writing clean, maintainable, and efficient CSS is crucial. Some best practices include using a CSS preprocessor like Sass or Less for better organization and reusability, employing a methodology like BEM or SMACSS to structure your CSS, leveraging modern layout systems like Flexbox and Grid, and utilizing CSS variables for consistent theming.
How can I transition from traditional CSS to modern CSS?
Transitioning to modern CSS involves learning and adopting new features and techniques. Start by understanding the basics of modern layout systems like Flexbox and Grid. Then, explore advanced properties like CSS variables, custom properties, and new pseudo-classes. Practice is key, so consider reworking an old project with modern CSS or starting a new one to apply what you’ve learned.
What are the challenges in using modern CSS and how can I overcome them?
One of the main challenges with modern CSS is browser compatibility. Not all browsers support all modern CSS features. To overcome this, you can use tools like Autoprefixer to automatically add vendor prefixes, or use feature queries (@supports rule) to provide fallbacks. Staying updated with the latest CSS specifications and browser support tables can also help.
How does modern CSS improve website performance?
Modern CSS can significantly improve website performance. It reduces the need for additional images, JavaScript, or other resources, leading to faster load times. Techniques like CSS animation can be more performance-efficient than JavaScript-based animations. Also, using modern layout systems can lead to cleaner, more efficient code, further enhancing performance.
What are some resources to learn modern CSS?
There are numerous online resources to learn modern CSS. Websites like CSS-Tricks, MDN Web Docs, and Smashing Magazine offer in-depth articles and tutorials. Online courses on platforms like Udemy, Coursera, and freeCodeCamp can also be beneficial. Additionally, practicing on coding playgrounds like CodePen can help solidify your understanding.
How does modern CSS enhance mobile responsiveness?
Modern CSS provides features like media queries, Flexbox, and Grid that greatly enhance mobile responsiveness. Media queries allow for different styling based on screen size, while Flexbox and Grid make creating responsive layouts much simpler and more intuitive. This ensures a consistent and optimized user experience across all devices.
Can I use modern CSS with CSS frameworks like Bootstrap?
Yes, you can use modern CSS with CSS frameworks like Bootstrap. While these frameworks provide pre-written CSS, you can always override their styles with your own modern CSS. This allows you to leverage the benefits of both the framework and modern CSS.
How does modern CSS contribute to accessibility?
Modern CSS contributes to accessibility in several ways. It allows for better control over visual design, which can improve readability and navigation. Features like focus styles and :not() pseudo-class can enhance keyboard accessibility. Also, using semantic HTML along with CSS can improve screen reader accessibility.
J. Michael Palermo IV is a Technical Evangelist at Microsoft with a passion for writing Windows Store apps with HTML5, CSS3, JavaScript. Prior to joining Microsoft, he served as a Microsoft Regional Director, MVP, and an "insider" with Microsoft on multiple technologies. Palermo has authored several technical books as well as several online courses with Pluralsight. More articles on related topics are posted on his blog.