Core points
"In 2015, everyone will give up the framework."
I'm not sure. I just want to attract your attention. No matter how much you joke, have you noticed a subtle change in the front-end field, that is, everyone is gradually giving up the framework? For example, the Sass mesh framework Susy gave up its dependence on Compass, and developers have been encouraged to think about whether jQuery is needed.
Web Components are very popular these days. As we enter a world where components become first-class citizens of web applications, we urgently need a framework that can handle this new type of development.
Limitations of Bootstrap and Foundation
If you are a front-end developer, you are likely to know Bootstrap or Foundation well. Popular CSS frameworks like this may limit us when developing with Web Components. Not that they are bad. They just come with too many built-in styles. Given the functionality of shadow DOM, this may not be what you want. These frameworks are known for trying to meet the needs of all. On the other hand, the component-driven CSS framework serves as the starting point for design and provides a framework for developing Web Components. That's all their goals.
Bootstrap has revolutionized the way we write front-end code to some extent. It provides us with excellent UI components and structures for extensible and maintainable stylesheets. It is perfect for large teams to collaborate with an accepted CSS format. The problem is, it contains a lot of code. It's perfect if you don't want to build anything from scratch. However, customizing it is not that effective. Can you customize it? sure. Is it easy? It is questionable.
"You are working under the hindrance of the framework now, not because of the framework." – Harry Roberts
Foundation effectively solves this problem. It is designed to be customized from scratch. In fact, the team is determined to make the default theme very basic to make sure all the sites built with it look different in the end. But some components of the Foundation are tightly coupled with markers, which limits the markers you can use, so it's more than just a CSS framework. They are actively working to improve this.
UI Toolkit and Frame
Harry Roberts gave a presentation earlier this year (see slideshow) discussing the nuances between the UI toolkit and the CSS framework. In this speech, he said that the CSS framework will not get in the way of you. It does not contain any styles. It has no restrictions on tags, HTML structures, or classes.
On the other hand, the UI toolkit is a complete product that offers a complete package out of the box: design, structure, standards, patterns and JavaScript plugins are all included in a neat package. These tools are used for rapid prototyping and quick start. Most of the time, if you want them to look different from how they are built, you end up overwriting the rules and circumventing the definition of the framework.
From this perspective, as Addy Osmani recently discussed, a single page in a sample project built with Bootstrap may have up to 91% of unused CSS.
So the question is: Which frameworks will avoid your path and let you write your code instead of writing your code for you?
Pattern Lab
Pattern Lab was created by Brad Frost and Dave Olsen and is based on the atomic design philosophy. This is a flexible approach to design the website from the basics and then build it up step by step. It's not so much a framework, it's a way to build websites and applications.
Pattern Lab encourages design websites that focus on components. Start with basic tags and build more complex components step by step. This framework has no assumptions about styles. It won't get in the way of you and allows you to handle your CSS.
It also provides a CSS creative structure guide and a set of tools that contribute to the entire creative process. For example, a tool that randomly resizes the screen to see how your design works on different screen sizes, and an annotation tool for quick collaboration.
But the best part is that it is preprocessor-free. Unlike many other solutions, it has no say in what preprocessor to use; use any preprocessor you like, just follow the principles. It also comes with zero styles and allows you to build style guides instead of imposing a style guide to you.
SUIT CSS
Nicolas Gallagher's SUIT CSS, by definition, is a component-based UI development method. It provides a set of guidelines that allow the implementation and combination of loosely coupled independent units.
Components are the core of this framework. It is designed to develop front-end systems where components are composable and configurable. It provides a guide to building well-encapsulated components and can be changed through the interface.
SUIT CSS is a mature framework built on a solid foundation. Documentation is a great place to learn more about it, but also learn more about front-end principles.
It also comes with a set of packages that can be added to the workflow. It works well with npm (node package manager) and includes automatic prefix capabilities, encapsulation testing, and a customizable and scalable preprocessor. Give it a try, or sit down and read some of the principles it is based on, which can give you great insights even if you decide not to use it.
inuitcss
inuit CSS is not a UI toolkit. It does not impose any design, nor does it contain thousands of components or lines of CSS code. It is a framework with scalability in mind, provided as a small package that you can scale as needed.
"Inuitcss provides a solid infrastructure on which you can build websites or applications of any size or style."
Again, the most important aspect of inuitcss is that it can quickly avoid your path. It is designed to be styling-free and forms a good foundation on which you can build your CSS.
For example, pagination in inuitcss only contains margins and padding, not fully designed components. It allows you to define your own style without having to customize the framework, or worse, override it.
inuitcss is currently undergoing an overhaul and the next version of the pre-Alpha module is available.
Another aspect of what I like about inuitcss is that it allows you to namespace components conveniently. It's easy to put the framework into an existing project and start refactoring your existing code.
This is a huge win for any existing framework. By contrast, when opening Bootstrap or Foundation, the most likely first line of code will affect everything (I'm looking at you, box-sizing!). These frameworks won't work with existing styles, or it can be a pain to put one of them into a project and expect everything to remain the same. inuitcss does the same, but it is optional and easy to disable.
Pure CSS
In my opinion, Pure CSS is somewhere between UI toolkits and frameworks. It provides a set of basic styles, but allows you to take over from there. By design, it is designed to steer your way and allows you to create CSS without overwriting existing rules.
"Pure has minimal styles and encourages you to write application styles on top of them. It is designed to avoid your path and make overriding styles easy."
Conclusion
Web Components is revolutionizing the front-end field. Our current favorite tool may not be the best when using these newer features. Maybe it's time to go beyond your favorite framework and try something new. I hope this post has given you enough options to consider.
There is a need to have sufficient clarity to choose the right tool for any given problem. Choose wisely. As always, don't avoid doing it yourself.
FAQs (FAQs) about component-driven CSS frameworks
Component-driven CSS framework provides many benefits. First, they improve reusability. Components can be reused in different parts of the project, reducing the amount of code written and making the code base more manageable. Second, they enhance consistency. By using the same components throughout the project, the user interface remains consistent, thus providing a better user experience. Third, they facilitate collaboration. Different team members can handle different components simultaneously, speeding up the development process. Finally, they make maintenance easier. Because components are independent, changes to one component do not affect others, making bug fixes and updates less complicated.
Traditional development methods usually use a top-down approach, where the overall design is broken down into smaller parts. In contrast, component-driven development adopts a bottom-up approach where individual components are developed independently and then combined into a complete design. This approach allows for greater flexibility and scalability as components can be added, removed, or modified without affecting the entire system.
Component-driven CSS framework is mainly designed for JavaScript-based technologies such as React, Vue and Angular. However, the principles of component-driven development can be applied to any programming language that supports modular programming. It should be noted that specific implementation details may vary depending on the language and framework used.
Some popular component-driven CSS frameworks include Bootstrap, Foundation, Bulma, and Semantic UI. These frameworks provide pre-designed components that can be customized to the specific needs of the project. They also provide a lot of documentation and community support, making them ideal for beginners and experienced developers.
To start component-driven development, you first need to understand the basic principles of modular programming and component-based architecture. Next, select a component-driven CSS framework that suits the project's needs. Get familiar with the documentation of the framework and start trying to create and use components. Online tutorials and courses can also help you learn this knowledge.
While component-driven CSS frameworks offer many benefits, they also have some potential drawbacks. For example, they may increase the complexity of the project, especially for beginners. They also require a good understanding of the grammar and conventions of the framework. Additionally, excessive reliance on pre-designed components can limit creativity and lead to the design looking plain.
Component-driven development improves team collaboration by allowing different team members to handle different components simultaneously. This parallel development process can significantly speed up the development timeline. Furthermore, because the components are independent, changes made by one developer do not affect the work of other developers, reducing the risk of conflicts and errors.
Yes, the component-driven CSS framework can be used for mobile application development. Many frameworks, such as React Native and Ionic, provide components designed specifically for mobile interfaces. These components can be used to create responsive designs that can run well on a variety of screen sizes and devices.
Component-driven development supports testing and debugging by allowing independent testing and debugging of each component. This modular approach makes it easier to isolate and fix bugs and write unit tests for individual components. It also facilitates regression testing, as changes to one component do not affect others.
Ensure the accessibility of components includes following best practices for accessible web design. This includes structuring using semantic HTML, providing alternative text to images, ensuring sufficient color contrast, and making all features accessible via the keyboard. Many component-driven CSS frameworks provide accessibility capabilities out of the box, but still require testing your components using a variety of assistive technologies to make sure they are indeed accessible.
The above is the detailed content of Component-Driven CSS Frameworks. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
