00:00:21.050
Hello and welcome to The Joy of CSS! I'm so glad people are excited about CSS. My name is Cecy Correa, and I'm an engineer at Thankful, a 100% online coding bootcamp. I'm really excited to give this talk today because I have a passion for teaching people about code. CSS, in particular, is something that can yield beautiful websites. When someone first starts coding, writing HTML and CSS can be an awesome experience. Seeing colors change on a page for the first time can be truly exhilarating. If we create a positive experience for beginners, we may inspire someone who will become a lifelong coding enthusiast. I'm enthusiastic about discussing these fundamental topics, as I believe they have a substantial impact on beginning coders. Today, I will talk to you about CSS, which holds a special place in my heart.
00:01:44.259
Like many people who grew up in the 90s, I got my start with anything computer-related through GeoCities. Yes, I had a GeoCities website, and I've tried to find it using the Wayback Machine but have been unsuccessful. If any of you can find it, I dare you! You can tweet at me @CecyCorrea. My GeoCities website had a space background, Comic Sans font used ironically, and an 'Under Construction' GIF because how else could people know the site was still being developed? Years later, a new generation of coders emerged, introduced to coding through MySpace, which allowed you to style your pages with CSS. Knowing a bit of CSS opened up so many possibilities, like changing borders and adding custom cursors—things I wouldn’t do now, knowing what I do about good UX practices. This is where my love for CSS and programming cultivated, giving me the confidence to pursue this path.
00:02:49.140
For many of us, our journey into coding began by playing around with websites like GeoCities or MySpace. Many in this field come from non-traditional backgrounds, and I find that often, we tend to be women or individuals from underrepresented minorities. When discussions arise about CSS or JavaScript, some people dismiss CSS, viewing it merely as layout logic, not worth learning. There are many feelings under the surface, especially when we consider the community that includes individuals like me, who began their coding experience with CSS. This was our gateway into development, a way of exploring creativity and technology. I wanted to have a conversation about why I find CSS so enjoyable to work with and explore the reasons some people might not find it fun. We’ll delve into tips for improving the CSS experience in our day-to-day tasks.
00:03:48.610
Borrowing from Bob Ross, we need to start with a solid foundation, which is important for CSS. We'll first discuss some basic pain points. One common pain point is targeting a specific element, which leads us into CSS specificity. Most people understand that an element like the <p> (paragraph) tag can be overridden by a class, which can be overridden by an ID. However, complexity arises when you add more layers. Learning CSS specificity through the lens of Star Wars helped me understand targeting elements better. For instance, consider elements as characters: the tag is like a Stormtrooper—easy to understand. A class is akin to Darth Maul, which is more powerful. Adding more elements increases specificity, and understanding this hierarchy is crucial.
00:05:42.130
For deeper insights into CSS specificity, I recommend checking out a blog post by Andy Clark that discusses CSS through the lens of Star Wars. He likens specific elements in CSS to characters' strengths and abilities. When you apply CSS, as you mix elements and classes, you see how specificity evolves. However, there’s a concern regarding the use of 'important.' A common comment I’ve heard is that one doesn’t need to learn CSS when they can just use 'important.' But, like in The Incredibles, when everyone is super, nobody is. Overusing 'important' leads to confusion. I encourage you to explore CSS specificity first-hand, and you can practice with CSS Diner, a tool that provides drills to improve your understanding of CSS specificity.
00:07:50.530
Moving on to another pain point, code can be overly verbose and hard to read due to poor habits. This is often the result of bad naming conventions and not prioritizing reusability. A wise person once remarked that there are two hard things in computer science: cache invalidation and naming things. CSS naming conventions can make a big difference in readability and maintenance. For example, when designing a layout like a pricing table, I've often seen people name elements like 'box1', 'box2', or by color, such as 'yellowBox', 'greenBox', etc. This works, but it's not optimal. Instead of focusing on the differences, we should emphasize what’s similar among elements to create reusable classes.
00:08:54.219
By establishing a base class for a pricing table that includes common properties such as width, height, and border styles, you can then create additional classes for exceptions. This method improves reusability and adaptability as marketing directives change, reducing the need for constant renaming of classes. For a more semantic approach, use descriptive class names. If marketing decides to change a color from yellow to purple, with semantic naming, you only need to change one class instead of finding and replacing every instance. To learn more about maintaining effective naming practices, standards like BEM (Block Element Modifier) can guide you in structuring your classes effectively.
00:10:19.480
Next, let’s discuss color in CSS. This topic may not seem like a pain point, but mastering color can take developers a long time. For instance, if someone asks you to make a button bluer, you can leverage the science behind color values, particularly hex codes. A hex code represents colors via RGB (red, green, blue) values. Understanding how to manipulate these values allows you to achieve desired color effects. If you increase the blue value while controlling red and green, you can easily create variations. Google provides a handy color picker tool that makes exploring color options even simpler.
00:11:40.940
Now, let's dive into some tips for enhancing your CSS. To organize your styles effectively, consider breaking your CSS files into manageable parts. My preferred structure follows the principles from the SASS documentation, where you can create distinct directories for variables, mix-ins, and components. This structuring allows for easier navigation within the codebase. By having a main CSS file made up of imported modules, it becomes less daunting for programmers to explore and modify styles.
00:12:13.660
Another critical tip involves naming variables thoughtfully. For instance, instead of overly specific names like 'red' for color values, consider naming your variables based on their function, such as 'primary' or 'highlight.' This strategy helps maintain flexibility in your design. If your team decides to alter branding colors, adjusting the variable name just requires a single change in the declaration. You can utilize this same approach for font families. Using terms like 'body' or 'headline' is typically more beneficial than using direct font names.
00:13:23.249
With SCSS, it's also crucial to think about powerful mix-ins that can simplify your code. For example, defining a mix-in for your typography styles can streamline your styling efforts, allowing you to set font families, sizes, and colors quickly in a single line of code. Another modern tool at your disposal is Flexbox, which simplifies layout creation. Flexbox is designed to allow flexible layouts, making it easy to manage the spatial relationships between items in a container.
00:14:30.830
For standard layouts, instead of defining floats and fixed widths, simply declaring 'display: flex' gives you a lot of flexibility. The default direction for flex layouts is a row, which simplifies alignment within your components. Using properties like 'flex-grow' allows elements to expand and fill available space easily. I encourage you to experiment with flex in your projects; it's a powerful tool that will make your styling life much simpler.
00:15:55.370
Furthermore, if you're new to flexbox, you can engage with interactive learning platforms like Flexbox Froggy, where you can play a game to help the frog reach its lily pad by solving flexbox alignment challenges. Getting familiar with flex properties through gamification can be an enjoyable way to improve your skills.
00:17:45.900
As we progress, it's essential to also explore pseudo-elements and how they can enhance your CSS skills. Pseudo-classes enable refined control over styles, like adjusting colors based on interactions (e.g., hover effects) or selecting specific elements (e.g., ‘nth-child’). Utilizing pseudo-classes with flex layouts can help create modern navigation bars that respond to user actions.
00:18:22.050
Next, I want to share the exciting future of CSS. CSS variables are becoming increasingly available, allowing you to define and use variables directly in your CSS files. They offer greater flexibility compared to traditional CSS variable formats, making it easier for developers to implement consistent styling across components. CSS grid is also on the horizon, giving developers a sophisticated tool for layout design, making it easier to create responsive, complex layouts.
00:19:35.950
Grid is designed specifically for layout purposes, allowing two-dimensional layouts for complex grid structures. It tackles some issues that traditional floats struggled with, streamlining the workflow for front-end developers. Learning grid design techniques will be essential as it continues to gain traction and support by modern browsers.
00:20:56.919
Finally, CSS Houdini is an emerging technology that bridges the gap between JavaScript and CSS. It introduces low-level JavaScript APIs that can extend the capabilities of styling, allowing developers to create and manipulate CSS properties dynamically in an unprecedented way. While still in the early adoption phase, CSS Houdini promises a future where CSS will become even more powerful and flexible than it already is. Keeping an eye on this development might open doors to new possibilities.
00:22:14.900
In conclusion, I hope you’ve gained insights into the exciting world of CSS. It's a vast, evolving landscape, and as developers, we continually learn and adapt to new techniques and features. Remember, as you dive into your CSS work, we don’t make mistakes; we create happy little accidents.