in this Article I want to talk about the Important facts of CSS
The CSS is awesome meme
I believe this is the most famous CSS meme out there, followed by the “css family guy” meme. You might have seen this somewhere, in a T-shirt, a mug or a sticker. And everybody can relate to it because it represents the frustration when trying to do a very basic thing in CSS and it doesn’t work properly. But what people don’t realize is that the “CSS is awesome” meme is actually a feature, not a bug!
Filters and gradients
It’s amazing to see how many mainstream effects are possible to be done with CSS nowadays. You find yourself much more amazed if you’re old enough to have coded websites using images for gradients. Or for border-radius for example. Gradients have native CSS support, and you can actually add multiple gradients and have very fun compositions.
The example below is using the Dublin CSS logo, which has some gradients. And I’ve also added some cool effects on the codepen below that are now possible with CSS. I’ve also put some filters that you can play with and see them in action. If you happen to be in Dublin, please look for Dublin CSS events, it’d be really nice to have you there.
CSS Units
The CSS units available are pretty cool, starting by the relative ones: percentage, em, rem. The em and rem are relative to the font-size, and the percentage is relative to the parent. Interestingly enough, you can have block elements with widths in em and the font-size they’re based on in percentage, then it can reach to a point where there’s no parent, and I actually already wrote an article about it, which has the “CSS is awesome” meme as feature image , so I’d recommend you to read it if you want to know more.
Then you have absolute units, like px which is the most used one, but you also have units that are based on physical measures, starting with Points (pt) which is 1/72 of an inch, and or picas (pc)(12 points). These are the less common one, but Quarter millimeters (q), millimeters (mm), centimeters (cm), or inches (in) are used in our everyday life, and on the web is quite useful when you need to print something that has a specific size.
Then there’s these two that deserve a codepen, ex, ch: Respectively these are the height of a lower case x, and the width of the number 0. These are not as commonly used or well-supported, and I only see them being used when you have text content using a monospace font.
Alternative unit for rotate
I promise this is the last one about CSS units. Cascading Style Sheets transform is an amazing Cascading Style Sheets feature that allows you to do lots of stuff, and rotate is one of them. I’ve used and seen it being used a lot, and the majority of times I’ve seen it. People were using it with degrees, which is quite straightforward if you had proper math education and learned trigonometry at school.
CSS variables
They’re officially called CSS custom properties, but let’s be honest here, everybody call them CSS variables, the same way everybody says ES6 instead of ES2015 . This amazing feature brings natively one of the main reasons of using pre-processors: ability to have variables in CSS. Maybe that’s why they’re so known as CSS variables, but they have a bigger purpose.
There’s an @ rule currently in draft called @apply. This pretty much enables mixins natively, which is the second main reason of using CSS pre-processors. CSS custom properties are available in all modern browsers, and they’re scoped, meaning they can be at ::root level, or at an element level. You can tweak the codepen below to understand more. Lastly, they can be easily changed with javascript
Pointer events
The pointer-events CSS property basically allows you to control if an element will react to the cursor or clicks. This one becomes really cool when you need to style something (like a select box) but the element has limitations on styling. You can simply put a div in front of it, disable pointer-events and done . Other example is when you mix images and text. In some cases it may happen that the user wants to select the text but ends up dragging the image. If you disable pointer-events on the image, your problems are gone.
Shorthand Properties
Some CSS properties, like margin, background, font, allow you to declare groups of values in one shorthand property separated by spaces. This cool thing about CSS is specific to properties like margin and padding, where you have something like this:
margin: 15px 5px 2px 20px;
Keep to component-based CSS
How do we style a web application? There is still a method of going from element to element and styling each in place. Easy, isn’t it? Don’t do it! Besides that you repeat yourself again and again you will end up with a viscous architecture resisting to any change. Instead you ought to look for repeating patterns in the PSDs and extract reusable components such as navbar, breadcrumbs, dropdowns, thumbnail, panel. Components are supposed to be small and independent. Let’s say we have a number of button-like controls across the application. So we create an abstract component identified by class name .btn. The corresponding rule-set describes look & feel applicable to any button in the application.
Structure the CSS into modules
Did it occur to you to look thought a single-file style-sheet of a large-scale project? It looks inscrutable. A complex problem, though, can be broken into simpler tasks. So the entire system becomes easier to debug, update and modify. We can split the whole style-sheet into multiple files so that every file represented a component. The application style-sheet we will do by combining required components:
Apply software design principles to CSS
Cascading Style Sheets is no programming language yet it is a code that must be maintainable. The very same principles we are used in programming languages encapsulation, loose coupling and reusability apply to CSS:
-
Reusability
-
Loose Coupling (Tag Independence)
-
Loose Coupling (Location Independence)
-
The Single Responsibility Principle (SRP)
-
The Open/Closed Principle (OCP)
-
Composition over Inheritance
Make simple graphic shapes with CSS
When you need a simple shape on a page you can use an image and it means an addition HTTP request except it is a previously loaded sprite or embedded Base64. You can go with embedded SVG or you can make a shape out of a generic HTML element with Cascading Style Sheets.
Conclusion
At last we talked about Some important facts of CSS And Of course it cannot cover everything what developer shall take care of. My intend was to bring attention to the fact that CSS is fat more complex thing that it may seem and must be taken as seriously as any other declarative or imperative language.