A preprocessor has its own syntax and later it gets translated into standard CSS in a separate CSS file because browsers don't understand the syntax. I like working with Sass and have used it in various projects.
I have covered some of the advantages of using a CSS Preprocessor here. Some of the CSS properties like paddings, margins, fonts and borders can be written in a much simpler way by shorthands.
Using shorthands helps to reduce the lines of rules. You can find here more info about how to use shorthands properties and for which CSS properties they can be applied. Normally, quality code doesn't need comments because it should already be clear and self-descriptive. But still, in some cases, we may need to write additional explanations. So when you feel that some parts of the code are unclear, then don't be afraid to add comments but on the other hand, make sure not to overdo it :.
As a Frontend Developer with a couple of years of experience, these are the most important tips that I can suggest for improving your CSS skills. If you have any questions, or you think there are also other tips for writing better CSS, don't hesitate to comment down below. If you want to learn more about web development, feel free to follow me on Youtube!
If you read this far, tweet to the author to show them you care. Tweet a thanks. Learn to code for free. Get started. Forum Donate. Cem Eygi. So let's begin For example, we can create 3 CSS classes for 3 buttons like this:. Don't Use Inline-Styles Well, there are arguments on the web about this: some are telling you never to use inline styles, while others are arguing that it can be useful in some cases.
Difficulties in Search Another problem with using inline-styles is that we can't search for them. Wouldn't it be easier with a CSS selector? Considering we are using both a class and an inline-style for an element:. However, when it comes to websites and mobile applications, things have changed drastically. No one uses inline styles without having a good reason. It is highly recommended to separate layout from design and put all your CSS styles into an external file to reap all the benefits featured above.
Therefore, the second method is the unquestionable leader. All the standard ways of creating CSS designs these days are based on it. Let us consider the most popular ones. The traditional way is to create a CSS website from scratch. If you need to create a CMS-powered CSS design, you should add to this toolkit some knowledge in this particular area. Although the process of creating everything by your hand is time-consuming, it is still rewarding. With every such finished project comes wealth of experience, new knowledge, findings and of course the satisfaction of transforming your idea on paper into an actual digital variant.
The second option is based on CSS grids. However, this time, you have a solid starting point on which you can build a sterling project, skipping a time-consuming step of laying out the foundation. The web is teeming with various CSS grids so that you can find the best match for your particular project. With Startup App and Slides App you can build unlimited websites using the online website editor which includes ready-made designed and coded elements, templates and themes.
Although these native CSS layout module systems cannot boast of complete browser compatibility, they are up-and-coming tools that give third-party CSS grids a hard time.
You may want to check the latest web design trends before you start designing. The third option implies the utilization of ready-made templates. They come in all shapes and sizes. Starting from free versions and ending with premium versions, you can find the solution that fits every budget. The main advantages of using ready-made CSS templates are.
Website builders occupy their own niche. They provide an intuitive environment and tools to create stylish and reliable CSS websites without any coding and design skills. Take Slides as a representative example. This online app ships with more than customizable handcrafted modules.
With its handy interface, you can create any website within minutes. To sum up. Each way has its pros and cons. Depending on your tech skills, amount of time, and money, you may find one or another solution appropriate for your project. As we have already mentioned, browser incompatibility is still one of the most significant issues when it comes to creating CSS designs. The sad truth is to make a website display consistently across different browsers is a challenge.
The reason for that is that browser incompatibility manifests itself in three ways:. Where to start? The first step to overcome browser inconsistencies is to know your tools of the trade. Visit Can I Use to determine whether CSS features you will use on your next project work consistently across browsers. Depending on this information, you may use fallbacks or other time-proving solutions.
Can I Use. Accessibility is of great matter these days. Since CSS allows excellent flexibility, you can create anything you want and turn a link into a decorative element with several code lines. However, you should not do this.
CSS should give people vital clues to navigate the website comfortably. Therefore, to create a CSS website that meets accessibility requirements, you should use the appropriate semantic element. As banal as it may sound, your task is to stick to common conventions to avoid confusion and provide a comfortable user experience. The component of the user interface should look and behave as expected; and, CSS should assist in this matter.
Whatever CSS design you create, it should meet current standards. It should be responsive , mobile-friendly, browser compatible, accessible, valid, and lightweight. To find out whether your CSS design satisfy all these criteria, you can use special third-party tools. They help to point out your mistakes and give some insights on how to handle them correctly.
There are three key instruments that you should have in your arsenal:. Last but not least. CSS Resets. In case your CSS style sheet sets rules for each and every element of the interface, or you do not mind minor differences in the appearance, then you do not need this.
However, bear in mind, redefining every aspect may result in big file size, leading to low loading time and unexpected errors. CSS designs can be static, dynamic and interactive.
Dive deeper into our collection of CSS design examples to see each one in live and get a hefty dose of inspiration. Personal Portfolio of Jorge Rigabert. Jorge Rigabert has a stylish personal portfolio that perfectly blends into present-day realms. It has a single-page layout split into two uneven sections to accommodate all the information and, at the same time, provide handy navigation.
Its key feature is a symbiosis between texts and visuals. The content occupies its own place under the Sun, while scroll-activated animations reveal beautiful illustrations to support each statement. The homepage of Art4Web meets us with a fancy parallax-based hero area. Even though this solution was incredibly popular several years ago, it still catches an eye and produces quite an impression. The rest of this CSS design is quite conventional.
It has a striped-based layout where each section is a combination of text and images spiced up with lovely CSS dynamic effects and animations. Vlog stays true to its roots through the years.
Their CSS website looks the same as several years ago. The idea certainly separates the brand from the others with its creativity and originality. The great thing is that you do not need to move anywhere else since all links open inside the homepage. Nice move. Slavery Footprint. The team behind Slavery Footprint for their CSS design has adopted one of the most popular solutions in this area, storytelling experience.
They have used scroll-activated animations , illustrations, and CSS effects to tell a story about slavery in an engaging manner. Note there is no lavish effects; the team uses mostly sliding transitions. However, it is enough to set the prime focus on the content and ignite interest. Future of Car Sharing. However, it has one small exception: the story reveals itself in a horizontal plane.
Again, we can see how the team was managed to turn boring content — statistics — into an engaging piece simply by using illustrations and CSS effects. Simple yet brilliant. Why Interactive. Why Interactive presents a relatively straightforward and compact CSS website example with a prime focus set on the content. The showreel section is an interesting take on the multilayered approach that, at some point, reminds renovated scrapbooking. Although the website lacks in actual interactive features, still the team was managed to make their point strong, and user experience engaging, relying only on CSS possibilities.
With preprocessors, defining mixins to reuse bits of CSS by composition is a great way to factor your code without using more specific selectors. There is still a concern over performance because the output stylesheet is bigger. Furthermore, the advantage of maintainability far outweighs the performance gains.
There are some declarations you really want to understand. Because if you don't there will still be a feeling of "black magic" happening. What you should know tip: if you think you would not be able to explain it clearly to someone else, click the links :. You may want to check these great tutorials:. Here is a great article on BEM which I recommend. Furthermore, if you have a component-based architecture such as React, Vue or Angular , I recommend CSS modules or styled components to remove the naming hassle of BEM here is an article on the whole topic.
Opinion: there is one main gotcha with these tools. You may believe that the auto-scoping feature of these tools acts as a pseudo-magic protection. However, beware that you should not bypass the above Don'ts. For instance, using HTML elements in CSS modules selectors destroys the purpose of auto-scoping because it will cascade to all children components. You should also keep a strict BEM-like approach structuring your component styles into blocks, elements, and modifiers while using these kinds of tools.
A lot can be done by using only seven CSS properties. Do challenge CSS that does not seems essential. Is this linear-gradient background color essential when nobody sees the gradient effect? Are those box-shadow declarations really useful? In the "More tools" drop-down, activate the "Coverage" tool, start recording and crawl your target pages. A note on frameworks like Bootstrap and others: they are useful for small and quick projects when you don't have time to dedicate to style.
But for many medium-sized and a lot of large-sized projects, don't use them. Over time, you will need to overwrite them and it will eventually take more time than doing it yourself because it will produce a more complex and more specific code. In addition, doing your style yourself makes you learn a lot. UI designer is a whole job so creating a UI from scratch is a real challenge. At first, try to reproduce the same look and feel than other websites you like you can look at the code with the browser dev tools.
My personal experience is that I started to love and learn CSS the moment I threw Bootstrap out the window for a personal project and started writing my own style. I hope that with all the above best practices you will feel more comfortable writing CSS and that it will help you enhance your code quality. In Part 2 I will address the hassle of migrating a hellish complex stylesheet full of black magic to a clean, understandable and maintainable one.
So don't hesitate to share your CSS horror stories! I will focus on actionable tips and tricks to avoid creating technical debt starting now. Part 2: how to migrate from a complex legacy stylesheet to a clean one. Requirements I assume that you are looking for advice to improve yourself at writing CSS, thus you have a basic knowledge of CSS and how it works.
A good understanding of what specificity is Here is a quick reminder about what is specificity: Specificity determines which CSS rule is applied by the browsers. The rules to win the specificity wars are: Inline style beats ID selectors. ID selectors are more specific than classes and attributes ::hover , ::before ….
Classes win over element selectors. A more specific selector beats any number of less specific selectors. For instance,.
0コメント