Book Image

Professional CSS3

By : Piotr Sikora
Book Image

Professional CSS3

By: Piotr Sikora

Overview of this book

CSS is the preferred technology to design modern web pages. Although CSS is often perceived as a simple language, applying modern styles to web pages with CSS and maintaining the code for larger websites can be quite tricky. We will take you right from understanding CSS to designing high-quality web pages in CSS3. We'll quickly take you through CSS3's features, and show you how to resolve common issues so you can build your basic framework. Finally, you will learn about code architecture and CSS methodologies used in scalable apps and you'll explore the various new features of CSS3, such as FlexBox, to help you create the most modern layout methodologies. By the end of the book, you will be a master at creating pure CSS web pages and will know sophisticated web design techniques, giving you an edge over other web designers.
Table of Contents (16 chapters)
15
Index

Good assumptions in code

While you are creating CSS code, you have to remember initial assumptions that will help you to keep clear and very readable code. These assumptions are as follows:

  • Naming convention—You need to remember that your code needs to be the exact names of classes.
  • Use comments, but not everywhere, only in places where they are needed. Yeah, but when they are needed? They are especially needed when you have some exception or when you have some quick fixes for browsers. With comments, you can describe blocks of code, which describes the views, for example, of footer/header, or any other element.
  • Try to keep code which is readable and logical. But how does unlogical code look like? Look at the following two examples:

    Example 1 is as follows:

    .classname {
      font-size: 12px;
      color: red;
      font-weight: bold;
      text-align: center;
      margin: 10px;
      padding-left: 2px;
      text-transform: uppercase;
    }

    Example 2 is as follows:

    .classname {
      margin: 10px;
      padding-left: 2px;
    
      font-size: 12px;
      font-weight: bold;
      text-align: center;
      text-transform: uppercase;
    
      color: red;
    }

Which code looks better? Yeah, of course, the second example because it has grouped declarations. First the description of the box model, then the font and text behaviors, and finally color. You can try to keep it in another hierarchy which will be more readable for you.

Using sample 2 in SASS:

.classname
  margin: 10px
  padding:
    left: 2px
  font:
    size: 12px
    weight: bold
  text:
    align: center
    transform: uppercase
  color: red

Isn't it shorter and more logical?

  • Create proper selectors (this will be described later in this chapter).
  • Create an elastic structure for your files.