Today I am going to write about css in coding. CSS stands for cascading style sheets. CSS is basically what makes a webpage look pretty. It can deal with color, size, spacing, fonts, and many other things. There are many ways to set up the styling on a webpage, and at the core CSS will handle it. In this blog I will talk about CSS in general, the complications that I have encountered with CSS, CSS library packages and CSS "testing".
Something I found out in my research about CSS was why it is named what it is named. I think the word style makes pretty obvious sense and so does sheets but cascading? I was curious at first why this word was needed in the name. The cascading part refers to the priority scheme for which style might apply for specific elements.
Setting up styles for a webpage is straightforward for the most part. When applying styles to parts of our webpage we use selectors on HTML elements. This can be done by selecting all elements of a certain attribute like headers or paragraphs. Or we can select specific ones using id or class selectors. Using an id selector will be specific to one item whereas we can use class selectors on multiple elements of our choosing.
In a react app there are many ways to deal with CSS. The first way that I learned was to make a style directory per component, something like this.
Technically we don't have to make separate file directories for each component, but it keeps it obvious what is styling what. Then in the component, we just need to import the file that connects to the directory where we have all our css selectors and their tasks. Once we do that we can just add selectors to whichever elements that we want to style up.
In this picture we see that the random divs here have selectors inside them. The first being a class selector and the second being an id. It is important to recognize that in react apps we use "className" rather than just "class". If you are working on a vanilla javascript application you would want to use the keyword "class". Then in our css directory we would use the selectors and add style attributes.
When writing the style attributes we use "#" for id selectors and "." for class selectors. Then inside the curly brackets we make our changes. The way we make changes is by using keywords and appropriate modifier for what we want to change. This might be as simple as font-style:bold. We write these changes as key:value types separated by semi-colons. There are a lot of keywords. Many of the modern code editors will give auto fill choices so it's easy to see how many different things we can do with CSS.
While having all these different options to make changes to our styling is great, it also can make things complicated and a bit unclear (for me). For instance we have commands like justify-content and flex-content and align-items. All three of these commands on some level will change the spacing or alignment of elements on the DOM. The difference between how they do what they do can be rather convoluted (again, for me). However, the nice thing is that in general there is a lot of documentation for these things online.
Something that makes things a bit easier for people like me who can have trouble seeing the small differences in all these commands are CSS libraries. Things like bootstrap or react-bootstrap can come in handy when trying to make an app have a clean, but generic look. CSS libraries like bootstrap will have predefined components that will have built in CSS modifiers pre built for use.
This is a pre-built button component that will have a specific look that I modified using the className selector. It would not look like a regular button if we were to make one on a basic HTML doc. If you also see we can specify right in the component if we want a large button or a dark variant or whether or not it is active. The active one is actually pretty cool. It makes it so that the button cant be clicked and its slightly opaque. Using that we can make conditions on whether or not the user can click the button maybe based on what information they have provided or something. Either way these CSS libraries have lots of cool things that make CSS on a webpage a little less work. However, I would imagine for the most part people would want to customize their own CSS on their applications to really get their own personal touch on the application.
Top comments (0)